@mui/internal-docs-infra 0.3.1-canary.3 → 0.3.1-canary.5

package/esm/useCode/useSourceEditing.js

@@ -1,25 +1,28 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 /**
  * Hook for managing source code editing functionality
  */
-export function useSourceEditing(_ref) {
-  var context = _ref.context,
-    selectedVariantKey = _ref.selectedVariantKey,
-    effectiveCode = _ref.effectiveCode,
-    selectedVariant = _ref.selectedVariant;
-  var contextSetCode = context == null ? void 0 : context.setCode;
-  var setSource = React.useCallback(function (source) {
+export function useSourceEditing({
+  context,
+  selectedVariantKey,
+  effectiveCode,
+  selectedVariant
+}) {
+  const contextSetCode = context?.setCode;
+  const setSource = React.useCallback(source => {
     if (contextSetCode) {
-      contextSetCode(function (currentCode) {
-        var newCode = {};
+      contextSetCode(currentCode => {
+        let newCode = {};
         if (!currentCode) {
-          newCode = _extends({}, effectiveCode); // TODO: ensure all source are strings
+          newCode = {
+            ...effectiveCode
+          }; // TODO: ensure all source are strings
         }
-        newCode[selectedVariantKey] = _extends(_extends({}, newCode[selectedVariantKey] || selectedVariant), {}, {
-          source: source,
+        newCode[selectedVariantKey] = {
+          ...(newCode[selectedVariantKey] || selectedVariant),
+          source,
           extraFiles: {}
-        });
+        };
         return newCode;
       });
     } else {

package/esm/useCode/useTransformManagement.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { getAvailableTransforms, createTransformedFiles } from "./useCodeUtils.js";
 import { usePreference } from "../usePreference/index.js";
@@ -6,36 +5,34 @@ import { usePreference } from "../usePreference/index.js";
  * Hook for managing code transforms and their application
  * Uses the useLocalStorage hook for local storage persistence of transform preferences
  */
-export function useTransformManagement(_ref) {
-  var context = _ref.context,
-    effectiveCode = _ref.effectiveCode,
-    selectedVariantKey = _ref.selectedVariantKey,
-    selectedVariant = _ref.selectedVariant,
-    initialTransform = _ref.initialTransform,
-    shouldHighlight = _ref.shouldHighlight;
+export function useTransformManagement({
+  context,
+  effectiveCode,
+  selectedVariantKey,
+  selectedVariant,
+  initialTransform,
+  shouldHighlight
+}) {
   // Transform state - get available transforms from context or from the effective code data
-  var availableTransforms = React.useMemo(function () {
+  const availableTransforms = React.useMemo(() => {
     // First try to get from context
-    if (context != null && context.availableTransforms && context.availableTransforms.length > 0) {
+    if (context?.availableTransforms && context.availableTransforms.length > 0) {
       return context.availableTransforms;
     }
 
     // Otherwise, get from the effective code data using the utility function
     return getAvailableTransforms(effectiveCode, selectedVariantKey);
-  }, [context == null ? void 0 : context.availableTransforms, effectiveCode, selectedVariantKey]);
+  }, [context?.availableTransforms, effectiveCode, selectedVariantKey]);
 
   // Use localStorage hook for transform persistence - this is our single source of truth
-  var _usePreference = usePreference('transform', availableTransforms.length === 1 ? availableTransforms[0] : availableTransforms, function () {
-      // Don't use initialTransform as the fallback - localStorage should always take precedence
-      // We'll handle the initial transform separately below
-      return null;
-    }),
-    _usePreference2 = _slicedToArray(_usePreference, 2),
-    storedValue = _usePreference2[0],
-    setStoredValue = _usePreference2[1];
+  const [storedValue, setStoredValue] = usePreference('transform', availableTransforms.length === 1 ? availableTransforms[0] : availableTransforms, () => {
+    // Don't use initialTransform as the fallback - localStorage should always take precedence
+    // We'll handle the initial transform separately below
+    return null;
+  });
 
   // Handle validation manually - empty string means "no transform selected"
-  var selectedTransform = React.useMemo(function () {
+  const selectedTransform = React.useMemo(() => {
     // If we have a stored value (including empty string), use it
     if (storedValue !== null) {
       if (storedValue === '') {
@@ -54,19 +51,19 @@ export function useTransformManagement(_ref) {
     }
     return null;
   }, [storedValue, availableTransforms, initialTransform]);
-  var setSelectedTransformAsUser = React.useCallback(function (value) {
-    var valueToStore = value === null ? '' : value;
+  const setSelectedTransformAsUser = React.useCallback(value => {
+    const valueToStore = value === null ? '' : value;
     setStoredValue(valueToStore);
   }, [setStoredValue]);
 
   // Memoize all transformed files based on selectedTransform
-  var transformedFiles = React.useMemo(function () {
+  const transformedFiles = React.useMemo(() => {
     return createTransformedFiles(selectedVariant, selectedTransform, shouldHighlight);
   }, [selectedVariant, selectedTransform, shouldHighlight]);
   return {
-    availableTransforms: availableTransforms,
-    selectedTransform: selectedTransform,
-    transformedFiles: transformedFiles,
+    availableTransforms,
+    selectedTransform,
+    transformedFiles,
     selectTransform: setSelectedTransformAsUser
   };
 }

package/esm/useCode/useUIState.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { useUrlHashState } from "../useUrlHashState/index.js";
 import { isHashRelevantToDemo } from "./useFileNavigation.js";
@@ -6,31 +5,24 @@ import { isHashRelevantToDemo } from "./useFileNavigation.js";
  * Hook for managing UI state like expansion and focus
  * Auto-expands if there's a relevant hash for this demo
  */
-export function useUIState(_ref) {
-  var _ref$defaultOpen = _ref.defaultOpen,
-    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
-    mainSlug = _ref.mainSlug;
-  var _useUrlHashState = useUrlHashState(),
-    _useUrlHashState2 = _slicedToArray(_useUrlHashState, 1),
-    hash = _useUrlHashState2[0];
-  var hasRelevantHash = isHashRelevantToDemo(hash, mainSlug);
-  var _React$useState = React.useState(defaultOpen || hasRelevantHash),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    expanded = _React$useState2[0],
-    setExpanded = _React$useState2[1];
-  var expand = React.useCallback(function () {
-    return setExpanded(true);
-  }, []);
+export function useUIState({
+  defaultOpen = false,
+  mainSlug
+}) {
+  const [hash] = useUrlHashState();
+  const hasRelevantHash = isHashRelevantToDemo(hash, mainSlug);
+  const [expanded, setExpanded] = React.useState(defaultOpen || hasRelevantHash);
+  const expand = React.useCallback(() => setExpanded(true), []);
 
   // Auto-expand if hash becomes relevant
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (hasRelevantHash && !expanded) {
       setExpanded(true);
     }
   }, [hasRelevantHash, expanded]);
   return {
-    expanded: expanded,
-    expand: expand,
-    setExpanded: setExpanded
+    expanded,
+    expand,
+    setExpanded
   };
 }

package/esm/useCode/useVariantSelection.js

@@ -1,5 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as React from 'react';
 import { usePreference } from "../usePreference/index.js";
 import { useUrlHashState } from "../useUrlHashState/index.js";
@@ -20,27 +18,23 @@ function parseVariantFromHash(urlHash, mainSlug, variantKeys) {
   if (!urlHash) {
     return null;
   }
-  var parts = urlHash.split(':');
+  const parts = urlHash.split(':');
 
   // If there are 3 parts (slug:variant:file), the variant is in the middle
   if (parts.length === 3) {
-    var variantPart = parts[1];
+    const variantPart = parts[1];
     // Find matching variant key (case-insensitive kebab match)
-    var matchingVariant = variantKeys.find(function (key) {
-      return toKebabCase(key) === variantPart.toLowerCase();
-    });
+    const matchingVariant = variantKeys.find(key => toKebabCase(key) === variantPart.toLowerCase());
     return matchingVariant || null;
   }
 
   // If there are 2 parts, could be slug:variant or slug:file
   if (parts.length === 2) {
-    var secondPart = parts[1];
+    const secondPart = parts[1];
     // Try to match as a variant first
-    var _matchingVariant = variantKeys.find(function (key) {
-      return toKebabCase(key) === secondPart.toLowerCase();
-    });
-    if (_matchingVariant) {
-      return _matchingVariant;
+    const matchingVariant = variantKeys.find(key => toKebabCase(key) === secondPart.toLowerCase());
+    if (matchingVariant) {
+      return matchingVariant;
     }
     // If no matching variant and it looks like a filename, assume Default
     if (secondPart.includes('.')) {
@@ -59,75 +53,64 @@ function parseVariantFromHash(urlHash, mainSlug, variantKeys) {
  * Priority: URL hash > localStorage > initialVariant > first variant
  * When hash has a variant, it overrides localStorage and is saved to localStorage
  */
-export function useVariantSelection(_ref) {
-  var effectiveCode = _ref.effectiveCode,
-    initialVariant = _ref.initialVariant,
-    variantType = _ref.variantType,
-    mainSlug = _ref.mainSlug,
-    _ref$saveHashVariantT = _ref.saveHashVariantToLocalStorage,
-    saveHashVariantToLocalStorage = _ref$saveHashVariantT === void 0 ? 'on-interaction' : _ref$saveHashVariantT;
+export function useVariantSelection({
+  effectiveCode,
+  initialVariant,
+  variantType,
+  mainSlug,
+  saveHashVariantToLocalStorage = 'on-interaction'
+}) {
   // Get variant keys from effective code
-  var variantKeys = React.useMemo(function () {
-    return Object.keys(effectiveCode).filter(function (key) {
-      var variant = effectiveCode[key];
-      return variant && _typeof(variant) === 'object' && 'source' in variant;
+  const variantKeys = React.useMemo(() => {
+    return Object.keys(effectiveCode).filter(key => {
+      const variant = effectiveCode[key];
+      return variant && typeof variant === 'object' && 'source' in variant;
     });
   }, [effectiveCode]);
 
   // Get URL hash and parse variant from it
-  var _useUrlHashState = useUrlHashState(),
-    _useUrlHashState2 = _slicedToArray(_useUrlHashState, 2),
-    urlHash = _useUrlHashState2[0],
-    setUrlHash = _useUrlHashState2[1];
-  var hashVariant = React.useMemo(function () {
-    return parseVariantFromHash(urlHash, mainSlug, variantKeys);
-  }, [urlHash, mainSlug, variantKeys]);
+  const [urlHash, setUrlHash] = useUrlHashState();
+  const hashVariant = React.useMemo(() => parseVariantFromHash(urlHash, mainSlug, variantKeys), [urlHash, mainSlug, variantKeys]);
 
   // Use localStorage hook for variant persistence
-  var _usePreference = usePreference('variant', variantType || variantKeys, function () {
-      return null;
-    }),
-    _usePreference2 = _slicedToArray(_usePreference, 2),
-    storedValue = _usePreference2[0],
-    setStoredValue = _usePreference2[1];
+  const [storedValue, setStoredValue] = usePreference('variant', variantType || variantKeys, () => {
+    return null;
+  });
 
   // Track if the last change was user-initiated (to prevent hash from overriding)
-  var isUserInitiatedChange = React.useRef(false);
+  const isUserInitiatedChange = React.useRef(false);
   // Track previous hash variant to detect hash changes
-  var prevHashVariant = React.useRef(hashVariant);
+  const prevHashVariant = React.useRef(hashVariant);
   // Track previous storedValue to detect localStorage changes
-  var prevStoredValue = React.useRef(storedValue);
+  const prevStoredValue = React.useRef(storedValue);
 
   // Determine initial variant: hash > localStorage > initialVariant > first variant
-  var _React$useState = React.useState(function () {
-      // Priority 1: Hash variant
-      if (hashVariant && variantKeys.includes(hashVariant)) {
-        return hashVariant;
-      }
-      // Priority 2: localStorage
-      if (storedValue && variantKeys.includes(storedValue)) {
-        return storedValue;
-      }
-      // Priority 3: initialVariant prop
-      if (initialVariant && variantKeys.includes(initialVariant)) {
-        return initialVariant;
-      }
-      // Priority 4: First available variant
-      return variantKeys[0] || '';
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    selectedVariantKey = _React$useState2[0],
-    setSelectedVariantKeyState = _React$useState2[1];
+  const [selectedVariantKey, setSelectedVariantKeyState] = React.useState(() => {
+    // Priority 1: Hash variant
+    if (hashVariant && variantKeys.includes(hashVariant)) {
+      return hashVariant;
+    }
+    // Priority 2: localStorage
+    if (storedValue && variantKeys.includes(storedValue)) {
+      return storedValue;
+    }
+    // Priority 3: initialVariant prop
+    if (initialVariant && variantKeys.includes(initialVariant)) {
+      return initialVariant;
+    }
+    // Priority 4: First available variant
+    return variantKeys[0] || '';
+  });
 
   // Track selected variant key in a ref for use in effect without causing re-runs
-  var selectedVariantKeyRef = React.useRef(selectedVariantKey);
-  React.useEffect(function () {
+  const selectedVariantKeyRef = React.useRef(selectedVariantKey);
+  React.useEffect(() => {
     selectedVariantKeyRef.current = selectedVariantKey;
   });
 
   // When hash changes and has a variant, override current selection
   // When hash is removed, fall back to localStorage
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Skip if this was a user-initiated change
     if (isUserInitiatedChange.current) {
       // Only reset the flag once the hash has actually been cleared
@@ -139,8 +122,8 @@ export function useVariantSelection(_ref) {
     }
 
     // Only apply hash if it actually changed (not just a re-render with same hash)
-    var hashChanged = prevHashVariant.current !== hashVariant;
-    var storedValueChanged = prevStoredValue.current !== storedValue;
+    const hashChanged = prevHashVariant.current !== hashVariant;
+    const storedValueChanged = prevStoredValue.current !== storedValue;
     prevHashVariant.current = hashVariant;
     prevStoredValue.current = storedValue;
     if (!hashChanged && !storedValueChanged) {
@@ -165,18 +148,18 @@ export function useVariantSelection(_ref) {
   storedValue, setStoredValue, saveHashVariantToLocalStorage]);
 
   // Programmatic setter: doesn't save to localStorage (used for hash-driven changes)
-  var setSelectedVariantKeyProgrammatic = React.useCallback(function (value) {
-    var resolvedValue = typeof value === 'function' ? value(selectedVariantKey) : value;
+  const setSelectedVariantKeyProgrammatic = React.useCallback(value => {
+    const resolvedValue = typeof value === 'function' ? value(selectedVariantKey) : value;
     if (variantKeys.includes(resolvedValue)) {
       setSelectedVariantKeyState(resolvedValue);
     }
   }, [selectedVariantKey, variantKeys]);
 
   // User setter: saves to localStorage (used for user-initiated changes like dropdown)
-  var setSelectedVariantKeyAsUser = React.useCallback(function (value) {
-    var resolvedValue = typeof value === 'function' ? value(selectedVariantKey) : value;
+  const setSelectedVariantKeyAsUser = React.useCallback(value => {
+    const resolvedValue = typeof value === 'function' ? value(selectedVariantKey) : value;
     // If value is null, select the first variant (default)
-    var effectiveValue = resolvedValue != null ? resolvedValue : variantKeys[0];
+    const effectiveValue = resolvedValue ?? variantKeys[0];
     if (effectiveValue && variantKeys.includes(effectiveValue)) {
       // Mark as user-initiated to prevent hash effect from overriding
       isUserInitiatedChange.current = true;
@@ -190,34 +173,34 @@ export function useVariantSelection(_ref) {
       setStoredValue(effectiveValue);
     }
   }, [setStoredValue, selectedVariantKey, variantKeys, urlHash, mainSlug, setUrlHash]);
-  var selectedVariant = React.useMemo(function () {
-    var variant = effectiveCode[selectedVariantKey];
-    if (variant && _typeof(variant) === 'object' && 'source' in variant) {
+  const selectedVariant = React.useMemo(() => {
+    const variant = effectiveCode[selectedVariantKey];
+    if (variant && typeof variant === 'object' && 'source' in variant) {
       return variant;
     }
     return null;
   }, [effectiveCode, selectedVariantKey]);
 
   // Safety check: if selectedVariant doesn't exist, fall back to first variant
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!selectedVariant && variantKeys.length > 0) {
       setSelectedVariantKeyProgrammatic(variantKeys[0]);
     }
   }, [selectedVariant, variantKeys, setSelectedVariantKeyProgrammatic]);
 
   // Function to save variant to localStorage (used for on-interaction mode)
-  var saveVariantToLocalStorage = React.useCallback(function (variant) {
+  const saveVariantToLocalStorage = React.useCallback(variant => {
     if (saveHashVariantToLocalStorage === 'on-interaction' && variant !== storedValue) {
       setStoredValue(variant);
     }
   }, [saveHashVariantToLocalStorage, storedValue, setStoredValue]);
   return {
-    variantKeys: variantKeys,
-    selectedVariantKey: selectedVariantKey,
-    selectedVariant: selectedVariant,
+    variantKeys,
+    selectedVariantKey,
+    selectedVariant,
     selectVariant: setSelectedVariantKeyAsUser,
     selectVariantProgrammatic: setSelectedVariantKeyProgrammatic,
-    saveVariantToLocalStorage: saveVariantToLocalStorage,
-    hashVariant: hashVariant
+    saveVariantToLocalStorage,
+    hashVariant
   };
 }

package/esm/useCopier/index.js

@@ -1,62 +1,35 @@
-import _regenerator from "@babel/runtime/helpers/esm/regenerator";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import copyToClipboard from 'clipboard-copy';
 export function useCopier(contents, opts) {
-  var _ref = opts || {},
-    onCopied = _ref.onCopied,
-    onError = _ref.onError,
-    onClick = _ref.onClick,
-    _ref$timeout = _ref.timeout,
-    timeout = _ref$timeout === void 0 ? 2000 : _ref$timeout;
-  var copyTimeoutRef = React.useRef(undefined);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    recentlySuccessful = _React$useState2[0],
-    setRecentlySuccessful = _React$useState2[1];
-  var copy = React.useCallback(/*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(event) {
-      var content, _t;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.p = _context.n) {
-          case 0:
-            clearTimeout(copyTimeoutRef.current);
-            setRecentlySuccessful(false);
-            _context.p = 1;
-            content = typeof contents === 'function' ? contents() : contents;
-            if (!content) {
-              _context.n = 2;
-              break;
-            }
-            _context.n = 2;
-            return copyToClipboard(content);
-          case 2:
-            setRecentlySuccessful(true);
-            onCopied == null || onCopied();
-            copyTimeoutRef.current = setTimeout(function () {
-              clearTimeout(copyTimeoutRef.current);
-              setRecentlySuccessful(false);
-            }, timeout);
-            _context.n = 4;
-            break;
-          case 3:
-            _context.p = 3;
-            _t = _context.v;
-            onError == null || onError(_t);
-          case 4:
-            onClick == null || onClick(event);
-          case 5:
-            return _context.a(2);
-        }
-      }, _callee, null, [[1, 3]]);
-    }));
-    return function (_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }(), [contents, timeout, onCopied, onError, onClick]);
+  const {
+    onCopied,
+    onError,
+    onClick,
+    timeout = 2000
+  } = opts || {};
+  const copyTimeoutRef = React.useRef(undefined);
+  const [recentlySuccessful, setRecentlySuccessful] = React.useState(false);
+  const copy = React.useCallback(async event => {
+    clearTimeout(copyTimeoutRef.current);
+    setRecentlySuccessful(false);
+    try {
+      const content = typeof contents === 'function' ? contents() : contents;
+      if (content) {
+        await copyToClipboard(content);
+      }
+      setRecentlySuccessful(true);
+      onCopied?.();
+      copyTimeoutRef.current = setTimeout(() => {
+        clearTimeout(copyTimeoutRef.current);
+        setRecentlySuccessful(false);
+      }, timeout);
+    } catch (error) {
+      onError?.(error);
+    }
+    onClick?.(event);
+  }, [contents, timeout, onCopied, onError, onClick]);
   return {
-    copy: copy,
-    recentlySuccessful: recentlySuccessful
+    copy,
+    recentlySuccessful
   };
 }

package/esm/useDemo/createCodeSandbox.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import LZString from 'lz-string';
 /**
  * Compress object for CodeSandbox API
@@ -13,30 +12,28 @@ function compress(object) {
  * Utility function for creating CodeSandbox demos
  * Returns the configuration that can be used with openWithForm
  */
-export function createCodeSandbox(_ref) {
-  var flattenedFiles = _ref.flattenedFiles,
-    rootFile = _ref.rootFile;
+export function createCodeSandbox({
+  flattenedFiles,
+  rootFile
+}) {
   // Convert flattened files to string format
-  var files = {};
-  Object.entries(flattenedFiles).forEach(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      filePath = _ref3[0],
-      fileData = _ref3[1];
+  const files = {};
+  Object.entries(flattenedFiles).forEach(([filePath, fileData]) => {
     files[filePath] = {
       content: fileData.source
     };
   });
-  var parameters = compress({
-    files: files
+  const parameters = compress({
+    files
   });
 
   // ref: https://codesandbox.io/docs/learn/browser-sandboxes/cli-api#supported-parameters
-  var formData = {
-    parameters: parameters,
-    query: "file=".concat(rootFile)
+  const formData = {
+    parameters,
+    query: `file=${rootFile}`
   };
   return {
     url: 'https://codesandbox.io/api/v1/sandboxes/define',
-    formData: formData
+    formData
   };
 }

package/esm/useDemo/createStackBlitz.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /**
  * Utility function for creating StackBlitz demos
  * Returns the configuration that can be used with openWithForm
@@ -7,32 +6,27 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 /**
  * Create StackBlitz configuration for use with openWithForm
  */
-export function createStackBlitz(_ref) {
-  var title = _ref.title,
-    description = _ref.description,
-    flattenedFiles = _ref.flattenedFiles,
-    rootFile = _ref.rootFile;
+export function createStackBlitz({
+  title,
+  description,
+  flattenedFiles,
+  rootFile
+}) {
   // Convert flattened files to string format
-  var files = {};
-  Object.entries(flattenedFiles).forEach(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      filePath = _ref3[0],
-      fileData = _ref3[1];
+  const files = {};
+  Object.entries(flattenedFiles).forEach(([filePath, fileData]) => {
     files[filePath] = fileData.source;
   });
-  var formData = {
+  const formData = {
     'project[template]': 'node',
     'project[title]': title,
-    'project[description]': "# ".concat(title, "\n").concat(description)
+    'project[description]': `# ${title}\n${description}`
   };
-  Object.entries(files).forEach(function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-      key = _ref5[0],
-      value = _ref5[1];
-    formData["project[files][".concat(key, "]")] = value;
+  Object.entries(files).forEach(([key, value]) => {
+    formData[`project[files][${key}]`] = value;
   });
   return {
-    url: "https://stackblitz.com/run?file=".concat(rootFile),
-    formData: formData
+    url: `https://stackblitz.com/run?file=${rootFile}`,
+    formData
   };
 }