Merge pull request #75 from modderme123/master

download as zip, use vite in codesandbox

Author: amoutonbrady

package.json

@@ -42,6 +42,7 @@
     "@tailwindcss/forms": "^0.4.0",
     "babel-preset-solid": "1.2.6",
     "dedent": "^0.7.0",
+    "jszip": "^3.7.1",
     "mitt": "^3.0.0",
     "monaco-editor": "^0.31.1",
     "monaco-editor-textmate": "^3.0.0",

playground/components/header.tsx

@@ -1,12 +1,11 @@
-import { Component, onCleanup, createSignal, JSX, Show, createMemo, For } from 'solid-js';
+import { Component, onCleanup, createSignal, Show, createMemo, For } from 'solid-js';
 import { Icon } from 'solid-heroicons';
-import { share, link, upload, xCircle, menu, moon, sun } from 'solid-heroicons/outline';
+import { share, link, download, xCircle, menu, moon, sun } from 'solid-heroicons/outline';
 import Dismiss from 'solid-dismiss';
 
 import logo from '../assets/logo.svg?url';
-import { processImport, Tab } from '../../src';
-import { exportToCsb } from '../utils/exportToCsb';
-import { exportToJSON } from '../utils/exportToJson';
+import type { Tab } from '../../src';
+import { exportToCsb, exportToZip } from '../utils/exportFiles';
 import { ZoomDropdown } from './zoomDropdown';
 import pkg from '../../package.json';
 
@@ -53,14 +52,6 @@ export const Header: Component<{
       .catch(console.error);
   }
 
-  const uploadFile: JSX.EventHandler<HTMLInputElement, Event> = async (event) => {
-    const [file] = event.currentTarget.files!;
-
-    const tabs = processImport(JSON.parse(await file.text()));
-    props.setTabs(tabs);
-    props.setCurrent('main.tsx');
-  };
-
   const versions = createMemo(() => {
     const hardCoded = ['0.26.5', '1.0.0', SOLID_VERSION];
 
@@ -109,33 +100,18 @@ export const Header: Component<{
               <span class="text-xs md:sr-only">{props.dark ? 'Light' : 'Dark'} mode</span>
             </button>
 
-            <label
-              class="md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded opacity-80 hover:opacity-100 cursor-pointer"
-              classList={{
-                'rounded-none	active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
-                  showMenu(),
-              }}
-              title="Import from JSON"
-            >
-              <input type="file" class="sr-only" onChange={uploadFile} accept=".json" />
-              <Icon path={upload} class="h-6" style={{ margin: '0' }} />
-              <span class="text-xs md:sr-only">Import from JSON</span>
-            </label>
-
             <button
               type="button"
-              onClick={() => exportToJSON(props.tabs)}
+              onClick={() => exportToZip(props.tabs)}
               class="md:text-white flex flex-row space-x-2 items-center md:px-3 px-2 py-2 focus:outline-none focus:ring-1 rounded opacity-80 hover:opacity-100"
               classList={{
                 'rounded-none	active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
                   showMenu(),
               }}
-              title="Export to JSON"
+              title="Export to Zip"
             >
-              <svg class="fill-current h-6" viewBox="0 0 24 24">
-                <path d="M12.043 23.968c.479-.004.953-.029 1.426-.094a11.805 11.805 0 003.146-.863 12.404 12.404 0 003.793-2.542 11.977 11.977 0 002.44-3.427 11.794 11.794 0 001.02-3.476c.149-1.16.135-2.346-.045-3.499a11.96 11.96 0 00-.793-2.788 11.197 11.197 0 00-.854-1.617c-1.168-1.837-2.861-3.314-4.81-4.3a12.835 12.835 0 00-2.172-.87h-.005c.119.063.24.132.345.201.12.074.239.146.351.225a8.93 8.93 0 011.559 1.33c1.063 1.145 1.797 2.548 2.218 4.041.284.982.434 1.998.495 3.017.044.743.044 1.491-.047 2.229-.149 1.27-.554 2.51-1.228 3.596a7.475 7.475 0 01-1.903 2.084c-1.244.928-2.877 1.482-4.436 1.114a3.916 3.916 0 01-.748-.258 4.692 4.692 0 01-.779-.45 6.08 6.08 0 01-1.244-1.105 6.507 6.507 0 01-1.049-1.747 7.366 7.366 0 01-.494-2.54c-.03-1.273.225-2.553.854-3.67a6.43 6.43 0 011.663-1.918c.225-.178.464-.333.704-.479l.016-.007a5.121 5.121 0 00-1.441-.12 4.963 4.963 0 00-1.228.24c-.359.12-.704.27-1.019.45a6.146 6.146 0 00-.733.494c-.211.18-.42.36-.615.555-1.123 1.153-1.768 2.682-2.022 4.256-.15.973-.15 1.96-.091 2.95.105 1.395.391 2.787.945 4.062a8.518 8.518 0 001.348 2.173 8.14 8.14 0 003.132 2.23 7.934 7.934 0 002.113.54c.074.015.149.015.209.015zm-2.934-.398a4.102 4.102 0 01-.45-.228 8.5 8.5 0 01-2.038-1.534c-1.094-1.137-1.827-2.566-2.247-4.08a15.184 15.184 0 01-.495-3.172 12.14 12.14 0 01.046-2.082c.135-1.257.495-2.501 1.124-3.58a6.889 6.889 0 011.783-2.053 6.23 6.23 0 011.633-.9 5.363 5.363 0 013.522-.045c.029 0 .029 0 .045.03.015.015.045.015.06.03.045.016.104.045.165.074.239.12.479.271.704.42a6.294 6.294 0 012.097 2.502c.42.914.615 1.934.631 2.938.014 1.079-.18 2.157-.645 3.146a6.42 6.42 0 01-2.638 2.832c.09.03.18.045.271.075.225.044.449.074.688.074 1.468.045 2.892-.66 3.94-1.647.195-.18.375-.375.54-.585.225-.27.435-.54.614-.823.239-.375.435-.75.614-1.154a8.112 8.112 0 00.509-1.664c.196-1.004.211-2.022.149-3.026-.135-2.022-.673-4.045-1.842-5.724a9.054 9.054 0 00-.555-.719 9.868 9.868 0 00-1.063-1.034 8.477 8.477 0 00-1.363-.915 9.927 9.927 0 00-1.692-.598l-.3-.06c-.209-.03-.42-.044-.634-.06a8.453 8.453 0 00-1.015.016c-.704.045-1.412.16-2.112.337C5.799 1.227 2.863 3.566 1.3 6.67A11.834 11.834 0 00.238 9.801a11.81 11.81 0 00-.104 3.775c.12 1.02.374 2.023.778 2.977.227.57.511 1.124.825 1.648 1.094 1.783 2.683 3.236 4.51 4.24.688.39 1.408.69 2.157.944.226.074.45.15.689.21z" />
-              </svg>
-              <span class="text-xs md:sr-only">Export to JSON</span>
+              <Icon path={download} class="h-6" style={{ margin: '0' }} />
+              <span class="text-xs md:sr-only">Export to Zip</span>
             </button>
 
             <button

playground/components/zoomDropdown.tsx

@@ -52,7 +52,7 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
 
     window.clearTimeout(timeoutId!);
 
-    timeoutId = setTimeout(() => {
+    timeoutId = window.setTimeout(() => {
       setOpen(false);
 
       stealFocus = true;

playground/utils/exportFiles.tsx

@@ -0,0 +1,154 @@
+import pkg from '../../package.json';
+import type { Tab } from '../../src';
+import { compressToBase64 } from '@amoutonbrady/lz-string';
+import dedent from 'dedent';
+
+type IFiles = Record<string, { content: string | Record<string, any>; isBinary: boolean }>;
+const viteConfigFile = dedent`
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+  build: {
+    target: "esnext",
+    polyfillDynamicImport: false,
+  },
+});
+`;
+const tsConfig = JSON.stringify(
+  {
+    compilerOptions: {
+      strict: false,
+      module: 'ESNext',
+      target: 'ESNext',
+      jsx: 'preserve',
+      esModuleInterop: true,
+      sourceMap: true,
+      allowJs: true,
+      lib: ['es6', 'dom'],
+      rootDir: 'src',
+      moduleResolution: 'node',
+      jsxImportSource: 'solid-js',
+      types: ['solid-js', 'solid-js/dom'],
+    },
+  },
+  null,
+  2,
+);
+
+const { dependencies: d, devDependencies: dd } = pkg;
+
+const packageJSON = JSON.stringify(
+  {
+    scripts: {
+      start: 'vite',
+      build: 'vite build',
+    },
+    dependencies: {
+      'solid-js': d['solid-js'],
+    },
+    devDependencies: {
+      vite: dd['vite'],
+      'vite-plugin-solid': dd['vite-plugin-solid'],
+    },
+  },
+  null,
+  2,
+);
+
+const indexHTML = (tabs: Tab[]) => dedent`
+<html>
+  <head>
+    <title>Vite Sandbox</title>
+    <meta charset="UTF-8" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+
+    <script type="module" src="./src/${tabs[0].name}.tsx"></script>
+  </body>
+</html>
+`;
+
+function getParameters(parameters: { files: IFiles }) {
+  return compressToBase64(JSON.stringify(parameters))
+    .replace(/\+/g, '-') // Convert '+' to '-'
+    .replace(/\//g, '_') // Convert '/' to '_'
+    .replace(/=+$/, ''); // Remove ending '='
+}
+
+export function exportToCsb(tabs: Tab[]): void {
+  const params = tabs.reduce<IFiles>((p, tab) => {
+    p[`src/${tab.name}.${tab.type}`] = { content: tab.source, isBinary: false };
+    return p;
+  }, {});
+
+  const parameters = getParameters({
+    files: {
+      ...params,
+      'vite.config.ts': {
+        content: viteConfigFile,
+        isBinary: false,
+      },
+      'tsconfig.json': {
+        content: tsConfig,
+        isBinary: false,
+      },
+      'index.html': {
+        content: indexHTML(tabs),
+        isBinary: false,
+      },
+      'package.json': {
+        content: packageJSON,
+        isBinary: false,
+      },
+    },
+  });
+
+  const url = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`;
+
+  const a = document.createElement('a');
+  a.setAttribute('href', url);
+  a.setAttribute('target', '_blank');
+  a.setAttribute('rel', 'noopener');
+
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
+
+/**
+ * This function will convert the tabs of the playground
+ * into a JSON formatted playground that can then be reimported later on
+ * via the url `https://playground.solidjs.com/?data=my-file.json` or
+ * vua the import button
+ *
+ * @param tabs {Tab[]} - The tabs to export
+ */
+export async function exportToZip(tabs: Tab[]): Promise<void> {
+  const { default: JSZip } = await import('jszip');
+  const zip = new JSZip();
+
+  // basic structure
+  zip.file('index.html', indexHTML(tabs));
+  zip.file('package.json', packageJSON);
+  zip.file('vite.config.ts', viteConfigFile);
+  zip.file('tsconfig.json', tsConfig);
+
+  // project src
+  const src = zip.folder('src')!;
+
+  for (const tab of tabs) {
+    src.file(`${tab.name}.${tab.type}`, tab.source);
+  }
+
+  const blob = await zip.generateAsync({ type: 'blob' });
+  const url = URL.createObjectURL(blob);
+
+  const anchor = (<a href={url} target="_blank" rel="noopener" download />) as HTMLElement;
+  document.body.prepend(anchor);
+  anchor.click();
+  anchor.remove();
+}