feat(qwik): add 6 more examples for Qwik (#97)

* feat(qwik): add 6 more examples for Qwik

* Remove the export and fix the formatting

* pnpm-lock file update

README.md

@@ -303,17 +303,17 @@ 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 src="https://us-central1-progress-markdown.cloudfunctions.net/progress/5" /></summary>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/32" /></summary>
 
-* [ ] Reactivity
+* [x] Reactivity
    * [x] Declare state
-   * [ ] Update state
-   * [ ] Computed state
+   * [x] Update state
+   * [x] Computed state
 * [ ] Templating
-   * [ ] Minimal template
-   * [ ] Styling
-   * [ ] Loop
-   * [ ] Event click
+   * [x] Minimal template
+   * [x] Styling
+   * [x] Loop
+   * [x] Event click
    * [ ] Dom ref
    * [ ] Conditional
 * [ ] Lifecycle

content/1-reactivity/2-update-state/qwik/Name.tsx

@@ -0,0 +1,8 @@
+import { component$, useStore } from '@builder.io/qwik';
+
+export const Name = component$(() => {
+	const store = useStore({ name: 'John' });
+	store.name = 'Jane';
+
+	return <h1>Hello {store.name}</h1>;
+});

content/1-reactivity/3-computed-state/qwik/DoubleCount.tsx

@@ -0,0 +1,8 @@
+import { component$, useStore } from '@builder.io/qwik';
+
+export const DoubleCount = component$(() => {
+	const store = useStore({ count: 10 });
+	const doubleCount = store.count * 2;
+
+	return <div>{doubleCount}</div>;
+});

content/2-templating/1-minimal-template/qwik/HelloWorld.tsx

@@ -0,0 +1,5 @@
+import { component$ } from '@builder.io/qwik';
+
+export const HelloWorld = component$(() => {
+  return <div>Hello World</div>;
+});

content/2-templating/2-styling/qwik/CssStyle.tsx

@@ -0,0 +1,15 @@
+import { component$, Host, useStyles$ } from '@builder.io/qwik';
+
+export const App = component$(() => {
+  useStyles$(`
+    .title {
+      color: red;
+    }
+    `);
+  return (
+    <Host>
+      <h1 class="title">I am red</h1>
+      <button style={{ 'font-size': '10rem' }}>I am a button</button>
+    </Host>
+  );
+});

content/2-templating/3-loop/qwik/Colors.tsx

@@ -0,0 +1,14 @@
+import { component$, Host } from '@builder.io/qwik';
+
+export const Colors = component$(() => {
+  const colors = ['red', 'green', 'blue']; 
+  return (
+    <Host>
+      <ul>
+        {colors.map((color) => (
+          <li key={color}>{color}</li>
+        ))}
+      </ul>
+    </Host>
+  );
+});

content/2-templating/4-event-click/qwik/Counter.tsx

@@ -0,0 +1,11 @@
+import { component$, useStore, Host } from '@builder.io/qwik';
+
+export const Counter = component$(() => {
+	const store = useStore({ count: 0 });
+	return (
+  <Host>
+    <p>Counter: {store.count}</p>
+    <button onClick$={() => store.count++}>Increment</button>
+  </Host>
+  );
+});

package.json

@@ -49,6 +49,7 @@
     "eslint-plugin-ember": "^10.6.1",
     "eslint-plugin-lit": "^1.6.1",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-qwik": "^0.0.34",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-solid": "^0.4.7",
     "eslint-plugin-svelte3": "^3.4.1",

pnpm-lock.yaml

@@ -25,6 +25,7 @@ specifiers:
   eslint-plugin-ember: ^10.6.1
   eslint-plugin-lit: ^1.6.1
   eslint-plugin-prettier: ^4.0.0
+  eslint-plugin-qwik: ^0.0.34
   eslint-plugin-react: ^7.29.4
   eslint-plugin-solid: ^0.4.7
   eslint-plugin-svelte3: ^3.4.1
@@ -75,6 +76,7 @@ devDependencies:
   eslint-plugin-ember: 10.6.1_eslint@8.16.0
   eslint-plugin-lit: 1.6.1_eslint@8.16.0
   eslint-plugin-prettier: 4.0.0_j7rsahgqtkecno6yauhsgsglf4
+  eslint-plugin-qwik: 0.0.34_eslint@8.16.0
   eslint-plugin-react: 7.30.0_eslint@8.16.0
   eslint-plugin-solid: 0.4.7_utdtartgf6fqqgkivzeynh76la
   eslint-plugin-svelte3: 3.4.1_vypdqzeyqutkgs6qzc7qod4c64
@@ -2616,6 +2618,15 @@ packages:
       prettier-linter-helpers: 1.0.0
     dev: true
 
+  /eslint-plugin-qwik/0.0.34_eslint@8.16.0:
+    resolution: {integrity: sha512-yxzLJANzSyGWT4X3RTzIDV5O7LWRjD8Kg1NAAdHI9rIFruTc2JSPSNK5sY0L7XzLoix3kl0gsnZe8LTxguGgdA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      eslint: '>= 8'
+    dependencies:
+      eslint: 8.16.0
+    dev: true
+
   /eslint-plugin-react/7.30.0_eslint@8.16.0:
     resolution: {integrity: sha512-RgwH7hjW48BleKsYyHK5vUAvxtE9SMPDKmcPRQgtRCYaZA0XQPt5FSkrU3nhz5ifzMZcA8opwmRJ2cmOO8tr5A==}
     engines: {node: '>=4'}

src/frameworks.mjs

@@ -170,8 +170,16 @@ export default [
 		title: 'Qwik',
 		img: 'framework/qwik.svg',
 		eslint: {
+			env: {
+				browser: true,
+				es2021: true,
+				node: true,
+			},
 			files: ['**/qwik/**'],
-			extends: ['eslint:recommended'],
+			extends: [
+				'eslint:recommended',
+				'plugin:qwik/recommended'
+			],
 		},
 		playgroundURL: 'https://qwik.builder.io/playground',
 		documentationURL: 'https://qwik.builder.io/docs/overview',