fix(script): fix README progression content generation

2026-04-05 04:59:02 +08:00 · 2023-07-19 23:37:57 +07:00
parent 642a77d64c
commit b6803a0dc0
4 changed files with 109 additions and 157 deletions
--- a/README.md
+++ b/README.md
@@ -11,11 +11,12 @@ How do we solve this ? Developers love having framework overview by examples. It

 ## 🔥 Progression

+<!-- progression start -->
 <details>
-<summary>
-<img width="18" height="18" src="public/framework/svelte.svg" />
-<b>Svelte</b>
-<img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+        <summary>
+            <img width="18" height="18" src="public/framework/svelte.svg" />
+            <b>Svelte</b>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -52,7 +53,7 @@ How do we solve this ? Developers love having framework overview by examples. It
        <summary>
            <img width="18" height="18" src="public/framework/react.svg" />
            <b>React</b>
-            <img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -89,7 +90,7 @@ How do we solve this ? Developers love having framework overview by examples. It
        <summary>
            <img width="18" height="18" src="public/framework/vue.svg" />
            <b>Vue 3</b>
-            <img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -126,7 +127,7 @@ How do we solve this ? Developers love having framework overview by examples. It
        <summary>
            <img width="18" height="18" src="public/framework/solid.svg" />
            <b>SolidJS</b>
-            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -163,7 +164,7 @@ How do we solve this ? Developers love having framework overview by examples. It
        <summary>
            <img width="18" height="18" src="public/framework/qwik.svg" />
            <b>Qwik</b>
-            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -196,11 +197,48 @@ How do we solve this ? Developers love having framework overview by examples. It
  - [x] Router link
  - [x] Routing

+</details><details>
+        <summary>
+            <img width="18" height="18" src="public/framework/marko.svg" />
+            <b>Marko</b>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+
+- [x] Reactivity
+  - [x] Declare state
+  - [x] Update state
+  - [x] Computed state
+- [x] Templating
+  - [x] Minimal template
+  - [x] Styling
+  - [x] Loop
+  - [x] Event click
+  - [x] Dom ref
+  - [x] Conditional
+- [x] Lifecycle
+  - [x] On mount
+  - [x] On unmount
+- [x] Component composition
+  - [x] Props
+  - [x] Emit to parent
+  - [x] Slot
+  - [x] Slot fallback
+  - [x] Context
+- [x] Form input
+  - [x] Input text
+  - [x] Checkbox
+  - [x] Radio
+  - [x] Select
+- [x] Webapp features
+  - [x] Render app
+  - [x] Fetch data
+  - [x] Router link
+  - [x] Routing
+
 </details><details>
        <summary>
            <img width="18" height="18" src="public/framework/angular.svg" />
            <b>Angular</b>
-            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -237,7 +275,7 @@ How do we solve this ? Developers love having framework overview by examples. It
        <summary>
            <img width="18" height="18" src="public/framework/lit.svg" />
            <b>Lit</b>
-            <img alt="96% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -274,7 +312,7 @@ How do we solve this ? Developers love having framework overview by examples. It
        <summary>
            <img width="18" height="18" src="public/framework/vue.svg" />
            <b>Vue 2</b>
-            <img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -311,7 +349,7 @@ How do we solve this ? Developers love having framework overview by examples. It
        <summary>
            <img width="18" height="18" src="public/framework/ember.svg" />
            <b>Ember</b>
-            <img alt="96% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -348,7 +386,7 @@ How do we solve this ? Developers love having framework overview by examples. It
        <summary>
            <img width="18" height="18" src="public/framework/alpine.svg" />
            <b>Alpine</b>
-            <img alt="96% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -385,7 +423,7 @@ How do we solve this ? Developers love having framework overview by examples. It
        <summary>
            <img width="18" height="18" src="public/framework/aurelia.svg" />
            <b>Aurelia 1</b>
-            <img alt="92% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -420,9 +458,9 @@ How do we solve this ? Developers love having framework overview by examples. It

 </details><details>
        <summary>
-            <img width="18" height="18" src="public/framework/marko.svg">
-            <b>Marko</b>
-            <img alt="100% progress" src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100"></summary>
+            <img width="18" height="18" src="public/framework/aurelia.svg" />
+            <b>Aurelia 2</b>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>

 - [x] Reactivity
  - [x] Declare state
@@ -456,6 +494,7 @@ How do we solve this ? Developers love having framework overview by examples. It
  - [x] Routing

 </details>
+<!-- progression end -->

 ## 🤝 Contributing

--- a/package.json
+++ b/package.json
@@ -62,7 +62,6 @@
    "react": "^18.2.0",
    "rehype-raw": "^6.1.1",
    "rehype-stringify": "^9.0.3",
-    "remark": "^14.0.3",
    "remark-parse": "^10.0.2",
    "remark-rehype": "^10.1.0",
    "shiki": "^0.14.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -136,9 +136,6 @@ devDependencies:
  rehype-stringify:
    specifier: ^9.0.3
    version: 9.0.3
-  remark:
-    specifier: ^14.0.3
-    version: 14.0.3
  remark-parse:
    specifier: ^10.0.2
    version: 10.0.2
@@ -4716,10 +4713,6 @@ packages:
      wrap-ansi: 6.2.0
    dev: true

-  /longest-streak@3.1.0:
-    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
-    dev: true
-
  /loose-envify@1.4.0:
    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
    hasBin: true
@@ -4841,13 +4834,6 @@ packages:
      - supports-color
    dev: true

-  /mdast-util-phrasing@3.0.1:
-    resolution: {integrity: sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==}
-    dependencies:
-      '@types/mdast': 3.0.11
-      unist-util-is: 5.2.1
-    dev: true
-
  /mdast-util-to-hast@12.3.0:
    resolution: {integrity: sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==}
    dependencies:
@@ -4861,19 +4847,6 @@ packages:
      unist-util-visit: 4.1.2
    dev: true

-  /mdast-util-to-markdown@1.5.0:
-    resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==}
-    dependencies:
-      '@types/mdast': 3.0.11
-      '@types/unist': 2.0.6
-      longest-streak: 3.1.0
-      mdast-util-phrasing: 3.0.1
-      mdast-util-to-string: 3.2.0
-      micromark-util-decode-string: 1.1.0
-      unist-util-visit: 4.1.2
-      zwitch: 2.0.4
-    dev: true
-
  /mdast-util-to-string@3.2.0:
    resolution: {integrity: sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==}
    dependencies:
@@ -6068,25 +6041,6 @@ packages:
      unified: 10.1.2
    dev: true

-  /remark-stringify@10.0.3:
-    resolution: {integrity: sha512-koyOzCMYoUHudypbj4XpnAKFbkddRMYZHwghnxd7ue5210WzGw6kOBwauJTRUMq16jsovXx8dYNvSSWP89kZ3A==}
-    dependencies:
-      '@types/mdast': 3.0.11
-      mdast-util-to-markdown: 1.5.0
-      unified: 10.1.2
-    dev: true
-
-  /remark@14.0.3:
-    resolution: {integrity: sha512-bfmJW1dmR2LvaMJuAnE88pZP9DktIFYXazkTfOIKZzi3Knk9lT0roItIA24ydOucI3bV/g/tXBA6hzqq3FV9Ew==}
-    dependencies:
-      '@types/mdast': 3.0.11
-      remark-parse: 10.0.2
-      remark-stringify: 10.0.3
-      unified: 10.1.2
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
  /remote-origin-url@0.4.0:
    resolution: {integrity: sha512-HYhdsT2pNd0LP4Osb0vtQ1iassxIc3Yk1oze7j8dMJFciMkW8e0rdg9E/mOunqtSVHSzvMfwLDIYzPnEDmpk6Q==}
    engines: {node: '>= 0.8.0'}
--- a/scripts/generateReadMeProgress.js
+++ b/scripts/generateReadMeProgress.js
@@ -1,4 +1,3 @@
-import { remark } from "remark";
 import fs from "fs/promises";
 import { packageDirectory } from "pkg-dir";
 import nodePath from "node:path";
@@ -6,51 +5,67 @@ import kebabCase from "lodash.kebabcase";
 import FRAMEWORKS from "../frameworks.mjs";
 import prettier from "prettier";

-function removeMarkdownHeadingContent(
-  content,
-  headingValue,
-  replaceContentValue
-) {
-  const tree = remark.parse(content);
+async function main() {
+  const codeContentDir = await parseContentDir();
+  const readmeContent = await fs.readFile("./README.md", "utf8");

-  // find index start
-  let targetNodeIndexStart;
-  for (let i = 0; i < tree.children.length; i++) {
-    const rootNode = tree.children[i];
-
-    if (
-      rootNode.type === "heading" &&
-      rootNode?.children[0]?.value === headingValue
-    ) {
-      targetNodeIndexStart = i;
-      break;
-    }
-  }
-
-  // find index end
-  if (Number.isInteger(targetNodeIndexStart)) {
-    let targetNodeIndexEnd = targetNodeIndexStart;
-    for (let i = targetNodeIndexStart + 1; i < tree.children.length; i++) {
-      const rootNode = tree.children[i];
-      if (rootNode.type === "heading") {
-        targetNodeIndexEnd = i;
-        break;
-      }
+  let progressionContent = "";
+  for (const framework of FRAMEWORKS) {
+    function mdCheck(b) {
+      return b ? "x" : " ";
    }

-    tree.children.splice(
-      targetNodeIndexStart + 1,
-      targetNodeIndexEnd - targetNodeIndexStart - 1,
-      {
-        type: "text",
-        value: replaceContentValue || "",
+    let list = "";
+    const allChecks = [];
+    for (const rootDir of codeContentDir) {
+      let sublist = "";
+      const checks = [];
+      for (const subdir of rootDir.children) {
+        const isChecked =
+          subdir.children.find((n) => n.dirName === framework.id)?.files
+            .length > 0;
+        checks.push(isChecked);
+        sublist += `   * [${mdCheck(isChecked)}] ${subdir.title}\n`;
      }
+      list += `* [${mdCheck(checks.every((v) => v))}] ${rootDir.title}\n`;
+      list += sublist;
+      allChecks.push(...checks);
+    }
+
+    const percent = Math.ceil(
+      (allChecks.filter((v) => v).length / allChecks.length) * 100
    );
+    let frameworkContent = `<details>
+        <summary>
+            <img width="18" height="18" src="public/${framework.img}" />
+            <b>${framework.title}</b>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/${percent}" /></summary>
+
+${list}
+</details>`;
+    progressionContent += frameworkContent;
  }

-  const newContent = remark.stringify(tree);
-  return newContent;
+  const MARKER_START = "<!-- progression start -->";
+  const MARKER_END = "<!-- progression end -->";
+  const progressionContentRegex = new RegExp(
+    `${MARKER_START}([\\s\\S]*?)${MARKER_END}`
+  );
+
+  const newProgressionContent =
+    "\n" +
+    prettier.format(progressionContent, {
+      parser: "markdown",
+    });
+
+  const newReadmeContent = readmeContent.replace(
+    progressionContentRegex,
+    `${MARKER_START}${newProgressionContent}${MARKER_END}`
+  );
+
+  await fs.writeFile("README.md", newReadmeContent);
 }
+main().catch(console.error);

 async function parseContentDir() {
  const rootDir = await packageDirectory();
@@ -117,58 +132,3 @@ async function parseContentDir() {
  }
  return rootSections;
 }
-
-async function main() {
-  const codeContentDir = await parseContentDir();
-  const content = await fs.readFile("./README.md", "utf8");
-  let newContent = removeMarkdownHeadingContent(
-    content,
-    "🔥 Progression",
-    "{{progression}}"
-  );
-
-  let progressionContent = "";
-  for (const framework of FRAMEWORKS) {
-    function mdCheck(b) {
-      return b ? "x" : " ";
-    }
-
-    let list = "";
-    const allChecks = [];
-    for (const rootDir of codeContentDir) {
-      let sublist = "";
-      const checks = [];
-      for (const subdir of rootDir.children) {
-        const isChecked =
-          subdir.children.find((n) => n.dirName === framework.id)?.files
-            .length > 0;
-        checks.push(isChecked);
-        sublist += `   * [${mdCheck(isChecked)}] ${subdir.title}\n`;
-      }
-      list += `* [${mdCheck(checks.every((v) => v))}] ${rootDir.title}\n`;
-      list += sublist;
-      allChecks.push(...checks);
-    }
-
-    const percent = Math.ceil(
-      (allChecks.filter((v) => v).length / allChecks.length) * 100
-    );
-    let frameworkContent = `<details>
-        <summary>
-            <img width="18" height="18" src="public/${framework.img}" />
-            <b>${framework.title}</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/${percent}" /></summary>
-
-${list}
-</details>`;
-    progressionContent += frameworkContent;
-  }
-
-  newContent = newContent.replace("{{progression}}", progressionContent);
-
-  await fs.writeFile(
-    "README.md",
-    prettier.format(newContent, { parser: "markdown" })
-  );
-}
-main().catch(console.error);