fix(scripts): fix progress script to find heading Progression

2026-04-05 13:09:03 +08:00 · 2022-05-19 02:01:49 +02:00
parent 0c77a2440c
commit 16433bc816
3 changed files with 54 additions and 325 deletions
--- a/README.md
+++ b/README.md
@@ -1,3 +1,24 @@
+[![Open in Gitpod][gitpod-src]][gitpod-href]
+
+![Component Party 🎉](.github/banner.png)
+
+> Web component JS frameworks quick overview by their syntax and features
+
+**Website: https://component-party.dev**
+
+## 🤔 Why ?
+
+Many JS developers don't have a good overview of every existing JS framework with their own syntax and features.
+How do we solve this ? Developers love having framework overview by examples. It's a quick introduction before going deeper.
+
+## 🚀 Roadmap
+
+*   \[ ] Add Preact
+*   \[ ] Add Stencil
+*   \[ ] Add native JS ?
+
+## 🔥 Progression
+
 <details>
        <summary>
            <img width="18" height="18" src="public/framework/svelte.svg" />
@@ -29,9 +50,9 @@
   * [x] Radio
   * [x] Select
 * [x] Webapp features
-   * [x] Routing
-   * [x] Router link
   * [x] Fetch data
+   * [x] Router link
+   * [x] Routing

 </details><details>
        <summary>
@@ -64,9 +85,9 @@
   * [x] Radio
   * [x] Select
 * [x] Webapp features
-   * [x] Routing
-   * [x] Router link
   * [x] Fetch data
+   * [x] Router link
+   * [x] Routing

 </details><details>
        <summary>
@@ -99,9 +120,9 @@
   * [x] Radio
   * [x] Select
 * [ ] Webapp features
-   * [x] Routing
-   * [x] Router link
   * [ ] Fetch data
+   * [x] Router link
+   * [x] Routing

 </details><details>
        <summary>
@@ -134,9 +155,9 @@
   * [x] Radio
   * [x] Select
 * [ ] Webapp features
-   * [x] Routing
-   * [x] Router link
   * [ ] Fetch data
+   * [x] Router link
+   * [x] Routing

 </details><details>
        <summary>
@@ -169,9 +190,9 @@
   * [x] Radio
   * [x] Select
 * [ ] Webapp features
-   * [x] Routing
-   * [x] Router link
   * [ ] Fetch data
+   * [x] Router link
+   * [x] Routing

 </details><details>
        <summary>
@@ -204,9 +225,9 @@
   * [x] Radio
   * [x] Select
 * [ ] Webapp features
-   * [x] Routing
-   * [x] Router link
   * [ ] Fetch data
+   * [x] Router link
+   * [x] Routing

 </details><details>
        <summary>
@@ -239,9 +260,9 @@
   * [x] Radio
   * [x] Select
 * [ ] Webapp features
-   * [x] Routing
-   * [x] Router link
   * [ ] Fetch data
+   * [x] Router link
+   * [x] Routing

 </details><details>
        <summary>
@@ -274,304 +295,9 @@
   * [x] Radio
   * [x] Select
 * [ ] Webapp features
-   * [ ] Routing
-   * [ ] Router link
   * [ ] Fetch data
-
-</details>
-
-[![Open in Gitpod][gitpod-src]][gitpod-href]
-
-![Component Party 🎉](.github/banner.png)
-
-> Web component JS frameworks quick overview by their syntax and features
-
-**Website: https://component-party.dev**
-
-## 🤔 Why ?
-
-Many JS developers don't have a good overview of every existing JS framework with their own syntax and features.
-How do we solve this ? Developers love having framework overview by examples. It's a quick introduction before going deeper.
-
-## 🚀 Roadmap
-
-*   \[ ] Add Preact
-*   \[ ] Add Stencil
-*   \[ ] Add native JS ?
-
-## 🔥 Progression
-
-<details>
-        <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
-    *   \[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] Form input
-    *   \[x] Input text
-    *   \[x] Checkbox
-    *   \[x] Radio
-    *   \[x] Select
-*   \[x] Webapp features
-    *   \[x] Routing
-    *   \[x] Router link
-
-</details><details>
-        <summary>
-            <img width="18" height="18" src="public/framework/react.svg" />
-            <b>React</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] Form input
-    *   \[x] Input text
-    *   \[x] Checkbox
-    *   \[x] Radio
-    *   \[x] Select
-*   \[x] Webapp features
-    *   \[x] Routing
-    *   \[x] Router link
-
-</details><details>
-        <summary>
-            <img width="18" height="18" src="public/framework/vue.svg" />
-            <b>Vue 3</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] Form input
-    *   \[x] Input text
-    *   \[x] Checkbox
-    *   \[x] Radio
-    *   \[x] Select
-*   \[x] Webapp features
-    *   \[x] Routing
-    *   \[x] Router link
-
-</details><details>
-        <summary>
-            <img width="18" height="18" src="public/framework/angular.svg" />
-            <b>Angular</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] Form input
-    *   \[x] Input text
-    *   \[x] Checkbox
-    *   \[x] Radio
-    *   \[x] Select
-*   \[x] Webapp features
-    *   \[x] Routing
-    *   \[x] Router link
-
-</details><details>
-        <summary>
-            <img width="18" height="18" src="public/framework/solid.svg" />
-            <b>SolidJS</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] Form input
-    *   \[x] Input text
-    *   \[x] Checkbox
-    *   \[x] Radio
-    *   \[x] Select
-*   \[x] Webapp features
-    *   \[x] Routing
-    *   \[x] Router link
-
-</details><details>
-        <summary>
-            <img width="18" height="18" src="public/framework/lit.svg" />
-            <b>Lit</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] Form input
-    *   \[x] Input text
-    *   \[x] Checkbox
-    *   \[x] Radio
-    *   \[x] Select
-*   \[x] Webapp features
-    *   \[x] Routing
-    *   \[x] Router link
-
-</details><details>
-        <summary>
-            <img width="18" height="18" src="public/framework/ember.svg" />
-            <b>Ember</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] Form input
-    *   \[x] Input text
-    *   \[x] Checkbox
-    *   \[x] Radio
-    *   \[x] Select
-*   \[x] Webapp features
-    *   \[x] Routing
-    *   \[x] Router link
-
-</details><details>
-        <summary>
-            <img width="18" height="18" src="public/framework/alpine.svg" />
-            <b>Alpine.js</b>
-            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/91" /></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] Form input
-    *   \[x] Input text
-    *   \[x] Checkbox
-    *   \[x] Radio
-    *   \[x] Select
-*   \[ ] Webapp features
-    *   \[ ] Routing
-    *   \[ ] Router link
+   * [ ] Router link
+   * [ ] Routing

 </details>

--- a/content/7-webapp-features/1-fetch-data/react/useFetchUsers.js
+++ b/content/7-webapp-features/1-fetch-data/react/useFetchUsers.js
@@ -6,7 +6,7 @@ export default function useFetchUsers() {
 	const [isLoading, setIsLoading] = useState(false);

 	useEffect(() => {
-		async function fetchUsers() {
+		async function fetchData() {
 			setIsLoading(true);
 			try {
 				const response = await fetch('https://randomuser.me/api/?results=3');
@@ -19,7 +19,7 @@ export default function useFetchUsers() {
 			}
 			setIsLoading(false);
 		}
-		fetchUsers();
+		fetchData();
 	}, []);

 	return { isLoading, error, data };
--- a/scripts/progress.js
+++ b/scripts/progress.js
@@ -12,6 +12,7 @@ function removeMarkdownHeadingContent(content, headingValue, replaceContentValue
 	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;
@@ -19,19 +20,21 @@ function removeMarkdownHeadingContent(content, headingValue, replaceContentValue
 	}

 	// find index end
-	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;
+	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;
+			}
 		}
-	}

-	tree.children.splice(targetNodeIndexStart + 1, targetNodeIndexEnd - targetNodeIndexStart - 1, {
-		type: 'text',
-		value: replaceContentValue || '',
-	});
+		tree.children.splice(targetNodeIndexStart + 1, targetNodeIndexEnd - targetNodeIndexStart - 1, {
+			type: 'text',
+			value: replaceContentValue || '',
+		});
+	}

 	const newContent = remark.stringify(tree);
 	return newContent;
@@ -106,7 +109,7 @@ async function parseContentDir() {
 async function main() {
 	const codeContentDir = await parseContentDir();
 	const content = await fs.readFile('./README.md', 'utf8');
-	let newContent = removeMarkdownHeadingContent(content, 'Progression', '{{progression}}');
+	let newContent = removeMarkdownHeadingContent(content, '🔥 Progression', '{{progression}}');

 	let progressionContent = '';
 	for (const framework of frameworks) {