@mui/internal-docs-infra
Version:
MUI Infra - internal documentation creation tools.
193 lines (173 loc) • 8.14 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import kebabCase from 'kebab-case';
import { useCode } from "../useCode/index.js";
import { CodeHighlighterContext } from "../CodeHighlighter/CodeHighlighterContext.js";
import { createStackBlitz } from "./createStackBlitz.js";
import { createCodeSandbox } from "./createCodeSandbox.js";
import { exportVariant } from "./exportVariant.js";
import { exportVariantAsCra } from "./exportVariantAsCra.js";
import { flattenVariant } from "./flattenVariant.js";
/**
* Demo templates use the exportVariant/exportVariantAsCra with flattenVariant pattern:
*
* For StackBlitz:
* const { exported: exportedVariant, entrypoint } = exportVariant(variantCode);
* const flattenedFiles = flattenVariant(exportedVariant);
* createStackBlitzDemo({ title, description, flattenedFiles, useTypescript, initialFile: entrypoint })
*
* For CodeSandbox:
* const { exported: craExport, entrypoint } = exportVariantAsCra(variantCode, { title, description, useTypescript });
* const flattenedFiles = flattenVariant(craExport);
* createCodeSandboxDemo({ title, description, flattenedFiles, useTypescript, initialFile: entrypoint })
* createCodeSandboxDemo({ title, description, flattenedFiles, useTypescript })
*/
/**
* Helper to create HTML form element with hidden inputs
*/
export function addHiddenInput(form, name, value) {
var input = document.createElement('input');
input.type = 'hidden';
input.name = name;
input.value = value;
form.appendChild(input);
}
/**
* Generic function to create and submit a form for opening online demo platforms
* This function creates HTML elements and should be used in browser contexts
*/
export function openWithForm(_ref) {
var url = _ref.url,
formData = _ref.formData,
_ref$method = _ref.method,
method = _ref$method === void 0 ? 'POST' : _ref$method,
_ref$target = _ref.target,
target = _ref$target === void 0 ? '_blank' : _ref$target;
var form = document.createElement('form');
form.method = method;
form.target = target;
form.action = url;
Object.entries(formData).forEach(function (_ref2) {
var _ref3 = _slicedToArray(_ref2, 2),
name = _ref3[0],
value = _ref3[1];
addHiddenInput(form, name, value);
});
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}
// TODO: take initialVariant and initialTransforms as parameters
export function useDemo(contentProps, opts) {
var code = useCode(contentProps, opts);
// Extract export configuration options
var _ref4 = opts || {},
_ref4$export = _ref4["export"],
commonExportConfig = _ref4$export === void 0 ? {} : _ref4$export,
_ref4$exportStackBlit = _ref4.exportStackBlitz,
stackBlitzExportConfig = _ref4$exportStackBlit === void 0 ? {} : _ref4$exportStackBlit,
_ref4$exportCodeSandb = _ref4.exportCodeSandbox,
codeSandboxExportConfig = _ref4$exportCodeSandb === void 0 ? {} : _ref4$exportCodeSandb;
// Get context to access components if available (using React.useContext to avoid import conflicts)
var context = React.useContext(CodeHighlighterContext);
var slug = React.useMemo(function () {
return contentProps.slug || (contentProps.name ? kebabCase(contentProps.name, false) : undefined);
}, [contentProps.slug, contentProps.name]);
// Get the effective components object - context overrides contentProps
var effectiveComponents = React.useMemo(function () {
return (context == null ? void 0 : context.components) || contentProps.components || {};
}, [context == null ? void 0 : context.components, contentProps.components]);
// Get the component for the current variant
var component = React.useMemo(function () {
return effectiveComponents[code.selectedVariant] || null;
}, [effectiveComponents, code.selectedVariant]);
// Demo-specific ref and focus management
var ref = React.useRef(null);
var resetFocus = React.useCallback(function () {
var _ref$current;
(_ref$current = ref.current) == null || _ref$current.focus();
}, []);
// Get the effective code - context overrides contentProps if available
var effectiveCode = React.useMemo(function () {
return (context == null ? void 0 : context.code) || contentProps.code || {};
}, [context == null ? void 0 : context.code, contentProps.code]);
// Create StackBlitz demo callback
var openStackBlitz = React.useCallback(function () {
// Get the current variant code
var variantCode = effectiveCode[code.selectedVariant];
if (!variantCode || typeof variantCode === 'string') {
console.warn('No valid variant code available for StackBlitz demo');
return;
}
var title = contentProps.name || 'Demo';
var description = "".concat(title, " demo");
// Determine if we should use TypeScript based on whether 'js' transform is NOT applied
// If 'js' transform is applied, it means we're showing the JS version of TS code
var useTypescript = code.selectedTransform !== 'js';
// Merge common export config with StackBlitz-specific config
var mergedConfig = _extends(_extends(_extends({}, commonExportConfig), stackBlitzExportConfig), {}, {
variantName: code.selectedVariant,
title: title,
description: description,
useTypescript: useTypescript
});
// Use custom export function if provided, otherwise use default exportVariant
var exportFunction = mergedConfig.exportFunction || exportVariant;
var _exportFunction = exportFunction(variantCode, mergedConfig),
exported = _exportFunction.exported,
rootFile = _exportFunction.rootFile;
// Flatten the variant to get a flat file structure
var flattenedFiles = flattenVariant(exported);
var stackBlitzDemo = createStackBlitz({
title: title,
description: description,
flattenedFiles: flattenedFiles,
rootFile: rootFile
});
openWithForm(stackBlitzDemo);
}, [effectiveCode, code.selectedVariant, code.selectedTransform, contentProps.name, commonExportConfig, stackBlitzExportConfig]);
// Create CodeSandbox demo callback
var openCodeSandbox = React.useCallback(function () {
// Get the current variant code
var variantCode = effectiveCode[code.selectedVariant];
if (!variantCode || typeof variantCode === 'string') {
console.warn('No valid variant code available for CodeSandbox demo');
return;
}
var title = contentProps.name || 'Demo';
var description = "".concat(title, " demo");
// Determine if we should use TypeScript based on whether 'js' transform is NOT applied
// If 'js' transform is applied, it means we're showing the JS version of TS code
var useTypescript = code.selectedTransform !== 'js';
// Merge common export config with CodeSandbox-specific config
var mergedConfig = _extends(_extends(_extends({}, commonExportConfig), codeSandboxExportConfig), {}, {
variantName: code.selectedVariant,
title: title,
description: description,
useTypescript: useTypescript
});
// Use custom export function if provided, otherwise use default exportVariantAsCra
var exportFunction = mergedConfig.exportFunction || exportVariantAsCra;
var _exportFunction2 = exportFunction(variantCode, mergedConfig),
craExport = _exportFunction2.exported,
rootFile = _exportFunction2.rootFile;
// Flatten the variant to get a flat file structure
var flattenedFiles = flattenVariant(craExport);
var codeSandboxDemo = createCodeSandbox({
flattenedFiles: flattenedFiles,
rootFile: rootFile
});
openWithForm(codeSandboxDemo);
}, [effectiveCode, code.selectedVariant, code.selectedTransform, contentProps.name, commonExportConfig, codeSandboxExportConfig]);
return _extends(_extends({}, code), {}, {
// Demo-specific additions
component: component,
ref: ref,
resetFocus: resetFocus,
openStackBlitz: openStackBlitz,
openCodeSandbox: openCodeSandbox,
name: contentProps.name,
slug: slug
});
}