refactor: migrate from astro to svelte + vite to improve performance (#…

…131)

* add highlighter
* add playground url
* add markdown support and notification center
* fix multiple md files
* add meta description with framework list
* fix: framework id loop index
* store frameworkIdsSelected in locale storage
* add generateFrameworkContent vite plugin
* add missing snippet case
* add content generate cache
* add angular component highlighter
* improve content generator organization
* add format and linter
* add git hooks
* add default frameworks

.eslintrc.esm.mjs

@@ -1,4 +1,4 @@
-import FRAMEWORKS from "./src/frameworks.mjs";
+import FRAMEWORKS from "./frameworks.mjs";
 
 /**
  * @type {import("eslint").Linter.Config}

.github/workflows/node.js.yml

@@ -18,7 +18,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [16.x, 18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

.gitignore

@@ -1,9 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-new-section
-.eslintcache
-yarn.lock
-package-lock.json
 dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
 .DS_Store
-.history
-.chrome
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+src/generatedContent

.vscode/settings.json

@@ -1,21 +1,8 @@
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "eslint.probe": ["javascript", "javascriptreact", "vue"],
-  "editor.formatOnSave": false,
   // Runs Prettier, then ESLint
   "editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"],
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
-  },
-  "cSpell.words": [
-    "alpinejs",
-    "astro",
-    "astrojs",
-    "matschik",
-    "mdast",
-    "pnpm",
-    "qwik",
-    "shiki",
-    "webp"
-  ]
+  }
 }

CONTRIBUTING.md

@@ -7,7 +7,7 @@ This site is built with [Astro](https://docs.astro.build). Site content is writt
 1.  Fork the project and create a new branch
 2.  Add the new framework SVG logo in `public/framework`
 3.  Install the ESLint plugin associated to the framework
-4.  In `src/frameworks.mjs`, add a new entry with SVG link and ESLint configuration
+4.  In `frameworks.mjs`, add a new entry with SVG link and ESLint configuration
 
 ## Improve website
 

README.md

@@ -1,5 +1,3 @@
-[![Open in Gitpod][gitpod-src]][gitpod-href]
-
 ![Component Party 🎉](.github/banner.webp)
 
 > Web component JS frameworks quick overview by their syntax and features
@@ -383,7 +381,7 @@ This project requires Node.js to be `v14.0.0` or higher, because we use new Java
 1.  Fork the project and create a new branch
 2.  Add the new framework SVG logo in `public/framework`
 3.  Install the ESLint plugin associated to the framework
-4.  In `src/frameworks.mjs`, add a new entry with SVG link and ESLint configuration
+4.  In `frameworks.mjs`, add a new entry with SVG link and ESLint configuration
 
 ## 🧑‍💻 Contributors
 
@@ -393,8 +391,3 @@ This project exists thanks to all the people who contribute. \[[Contribute](CONT
 ## ⚖️ License
 
 MIT. Made with 💖
-
-<!-- variables -->
-
-[gitpod-src]: https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod
-[gitpod-href]: https://gitpod.io/#https://github.com/matschik/component-party

build/generateContentVitePlugin.js

@@ -0,0 +1,43 @@
+import fs from "fs";
+import generateContent from "./lib/generateContent.js";
+import { createFsCache } from "micache";
+import { hashElement } from "folder-hash";
+
+const contentDirFsCache = await createFsCache("pluginGenerateFrameworkContent");
+
+export default function pluginGenerateFrameworkContent() {
+  const name = "generateFrameworkContent";
+
+  function logInfo(...args) {
+    console.info(`[${name}]`, ...args);
+  }
+
+  async function build() {
+    logInfo("Generating framework content files...");
+    const contentDirHash =
+      (await hashElement("content")).hash + (await hashElement("build")).hash;
+    const contentDirLastHash = await contentDirFsCache.get("contentDirHash");
+    if (contentDirHash !== contentDirLastHash) {
+      await generateContent();
+      await contentDirFsCache.set("contentDirHash", contentDirHash);
+      logInfo(`done`);
+    } else {
+      logInfo(`done with cache`);
+    }
+  }
+
+  let fsContentWatcher;
+  if (process.env.NODE_ENV === "development") {
+    fsContentWatcher = fs.watch("content", { recursive: true }, build);
+  }
+
+  return {
+    name,
+    async buildStart() {
+      await build();
+    },
+    buildEnd() {
+      fsContentWatcher && fsContentWatcher.close();
+    },
+  };
+}

build/lib/angularHighlighter.js

@@ -0,0 +1,63 @@
+export function mustUseAngularHighlighter(fileContent) {
+  return (
+    fileContent.includes("@angular/core") && fileContent.includes("template")
+  );
+}
+
+export function highlightAngularComponent(highlighter, fileContent, fileExt) {
+  const templateCode = getAngularTemplateCode(fileContent);
+
+  let codeHighlighted = "";
+  if (templateCode) {
+    const componentWithEmptyTemplate =
+      removeAngularTemplateContent(fileContent);
+    const templateCodeHighlighted = highlighter(templateCode, {
+      lang: "html",
+    });
+
+    const componentWithoutTemplateHighlighted = highlighter(
+      componentWithEmptyTemplate,
+      {
+        lang: fileExt,
+      }
+    );
+
+    codeHighlighted = componentWithoutTemplateHighlighted.replace(
+      "template",
+      "template: `" + removeCodeWrapper(templateCodeHighlighted) + "`,"
+    );
+  } else {
+    codeHighlighted = highlighter(fileContent, {
+      lang: fileExt,
+    });
+  }
+
+  return codeHighlighted;
+}
+
+function getAngularTemplateCode(fileContent) {
+  // regex to grab what is inside angular component template inside backticks
+  const regex = /template:\s*`([\s\S]*?)`/gm;
+
+  // grab the template string
+  const template = regex.exec(fileContent);
+
+  if (template) return template[1];
+
+  return "";
+}
+
+function removeAngularTemplateContent(fileContent) {
+  const componentWithoutContentInsideTemplate = fileContent.replace(
+    /template:\s*`([\s\S]*?)([^*])`,?/gm,
+    "template"
+  );
+
+  return componentWithoutContentInsideTemplate;
+}
+
+function removeCodeWrapper(html) {
+  const regexForWrapper = /<pre([\s\S]*?)><code>([\s\S]*?)<\/code><\/pre>/gm;
+  const code = regexForWrapper.exec(html);
+  return code[2];
+}