Add Solid REPL (#81)

* feat(repl): improve repl by fmw, add solid repl

* fix: fix lz-string pkg esm

* feat(repl): sort files for repl generator link

* feat(repl): add css file support for solid repl

package.json

@@ -34,6 +34,7 @@
     "@astrojs/tailwind": "^0.1.2",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-proposal-decorators": "^7.17.9",
+    "@matschik/lz-string": "^0.0.2",
     "@tailwindcss/typography": "^0.5.2",
     "@types/mdast": "^3.0.10",
     "@typescript-eslint/eslint-plugin": "^5.20.0",

src/components/Section.astro

@@ -8,9 +8,7 @@ import Title from '@/components/Title.svelte'
 import FrameworkLabel from '@/components/FrameworkLabel.astro'
 import FRAMEWORKS from '@/frameworks.mjs'
 import CodeViewer from '@/components/CodeViewer.astro'
-import createVue3REPL from '@/utils/createVue3REPL.js'
-import createSvelteREPL from '@/utils/createSvelteREPL.js'
-import createAlpineREPL from '@/utils/createAlpineREPL.js'
+import repl from "@/utils/repl"
 
 const { path: sectionPath } = Astro.props
 
@@ -27,32 +25,22 @@ function capitalize(string) {
 	return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-const vue3REPL = createVue3REPL()
-const svelteREPL = createSvelteREPL()
-const alpineREPL = createAlpineREPL()
-
-function generatePlaygroundURL(frameworkId, files){
-  let playgroundURL
-  if(frameworkId === "vue3"){
-    const contentByFilename = files.reduce((acc, file) => {
-      acc[file.fileName] =  file.content
-      return acc
-    }, {})
-    playgroundURL = vue3REPL.fromContentByFilename(contentByFilename)
-  } else if(frameworkId === "svelte"){
-    const contentByFilename = files.reduce((acc, file) => {
-      acc[file.fileName] =  file.content
-      return acc
-    }, {})
-    playgroundURL = svelteREPL.fromContentByFilename(contentByFilename) 
-  } else if(frameworkId === 'alpine'){
-    const contentByFilename = files.reduce((acc, file) => {
-      acc[file.fileName] =  { content: file.content }
-      return acc
-    }, {})
-    playgroundURL = alpineREPL.fromContentByFilename(contentByFilename)
+function generatePlaygroundURL(frameworkId, files) {
+  const frameworkREPL = repl[frameworkId];
+  if (!frameworkREPL) {
+    return;
   }
-   return playgroundURL
+
+  const frameworkConfig = FRAMEWORKS.find(f => f.id === frameworkId)
+
+  const contentByFilename = frameworkConfig.filesSorter(files).reduce((acc, file) => {
+    acc[file.fileName] = file.content;
+    return acc;
+  }, {});
+
+  const playgroundURL = frameworkREPL.fromContentByFilename(contentByFilename);
+
+  return playgroundURL;
 }
 
 const subSectionDirNames = await fs.readdir(sectionPath)

src/utils/repl/createSolidREPL.js

@@ -0,0 +1,38 @@
+import nodePath from 'path';
+import { compressToURL } from '@matschik/lz-string';
+
+export default () => {
+	const BASE_URL = 'https://playground.solidjs.com/#';
+	const SOURCE_PREFIX = `import { render } from "solid-js/web";\n`;
+	const getSourceSuffix = (componentName) => `\n\nrender(() => <${componentName} />, document.getElementById("app"));\n`;
+
+	function generateURLFromData(data) {
+		return `${BASE_URL}${compressToURL(JSON.stringify(data))}`;
+	}
+
+	function fromContentByFilename(contentByFilename) {
+		const data = Object.keys(contentByFilename).map((filename) => {
+			const content = contentByFilename[filename];
+			const parsedFilename = nodePath.parse(filename);
+			const ext = parsedFilename.ext.split('.').pop();
+
+			return {
+				name: parsedFilename.name,
+				type: ext === 'jsx' ? 'tsx' : ext,
+				source: content.replaceAll('.jsx', '.tsx'),
+			};
+		});
+
+		const mainFile = data[0];
+		const mainComponentName = mainFile.name;
+		mainFile.name = 'main';
+		mainFile.type = 'tsx';
+		mainFile.source = SOURCE_PREFIX + mainFile.source + getSourceSuffix(mainComponentName);
+
+		return generateURLFromData(data);
+	}
+
+	return {
+		fromContentByFilename,
+	};
+};

src/utils/repl/createSvelteREPL.js

@@ -12,16 +12,16 @@ export default function createSvelteREPL() {
 	}
 
 	function fromContentByFilename(contentByFilename) {
-		const data = [];
-		for (const filename of Object.keys(contentByFilename)) {
+		const data = Object.keys(contentByFilename).map((filename) => {
 			const content = contentByFilename[filename];
 			const parsedFilename = nodePath.parse(filename);
-			data.push({
+			return {
 				name: parsedFilename.name,
 				type: parsedFilename.ext.split('.').pop(),
 				source: content,
-			});
-		}
+			};
+		});
+
 		const url = generateURLFromData(data);
 		return url;
 	}

src/utils/repl/index.js

@@ -0,0 +1,11 @@
+import createAlpineREPL from './createAlpineREPL';
+import createSvelteREPL from './createSvelteREPL';
+import createVue3REPL from './createVue3REPL';
+import createSolidREPL from './createSolidREPL';
+
+export default {
+	vue3: createVue3REPL(),
+	svelte: createSvelteREPL(),
+	alpine: createAlpineREPL(),
+	solid: createSolidREPL(),
+};