fix(qwik):dev run-scripts

capsule-org · Jul 5, 2022 · 74a8e49 · 74a8e49
1 parent dbbe41b
commit 74a8e49
Show file tree

Hide file tree

Showing 14 changed files with 89 additions and 131 deletions.
diff --git a/template-qwik-js/options.html b/template-qwik-js/options.html
@@ -1,18 +1,13 @@
 <!DOCTYPE html>
-<html>
-  <!-- THIS FILE IS ONLY USED DURING DEVELOPMENT -->
-  <!-- THIS FILE WILL NEVER SHOW UP IN PRODUCTION DEPLOYMENT -->
+<html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <title>Qwik Client Dev Mode</title>
-    <meta name="viewport" content="width=device-width" />
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icons/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Qwik + JS + Vite App - Options</title>
   </head>
   <body>
-    <script type="module">
-      // Vite Dev Mode Only
-      import { render, jsx } from '@builder.io/qwik'
-      import { Main } from '/src/main.jsx'
-      render(document.body, jsx(Main, {}))
-    </script>
+    <div id="app"></div>
+    <script type="module" src="/src/options/index.jsx"></script>
   </body>
 </html>
diff --git a/template-qwik-js/package.json b/template-qwik-js/package.json
@@ -22,10 +22,10 @@
     "fmt": "prettier --write '**/*.{jsx,js,json,css,scss,md}'"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.18",
+    "@builder.io/qwik": "^0.0.34",
     "@crxjs/vite-plugin": "^1.0.12",
-    "@types/node": "17.0.17",
+    "@types/node": "^17.0.17",
     "prettier": "^2.7.1",
-    "vite": "2.9.13"
+    "vite": "^2.9.13"
   }
 }
diff --git a/template-qwik-js/popup.html b/template-qwik-js/popup.html
@@ -1,18 +1,13 @@
 <!DOCTYPE html>
-<html>
-  <!-- THIS FILE IS ONLY USED DURING DEVELOPMENT -->
-  <!-- THIS FILE WILL NEVER SHOW UP IN PRODUCTION DEPLOYMENT -->
+<html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <title>Qwik Client Dev Mode</title>
-    <meta name="viewport" content="width=device-width" />
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/icon/logo.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chrome Extensioin + Qwik + JS + Vite App - Popup</title>
   </head>
   <body>
-    <script type="module">
-      // Vite Dev Mode Only
-      import { render, jsx } from '@builder.io/qwik'
-      import { Main } from '/src/main.jsx'
-      render(document.body, jsx(Main, {}))
-    </script>
+    <div id="app"></div>
+    <script type="module" src="/src/popup/index.jsx"></script>
   </body>
 </html>
diff --git a/template-qwik-js/src/background/index.js b/template-qwik-js/src/background/index.js
@@ -1,3 +1,3 @@
-console.info('chrome-ext template-preact-ts background script')
+console.info('chrome-ext template-qwik-ts background script')
 
 export {}
diff --git a/template-qwik-js/src/content/index.js b/template-qwik-js/src/content/index.js
@@ -1,3 +1,3 @@
-console.info('chrome-ext template-preact-ts content script')
+console.info('chrome-ext template-qwik-ts content script')
 
 export {}
diff --git a/template-qwik-js/src/options/Options.jsx b/template-qwik-js/src/options/Options.jsx
@@ -1,20 +1,25 @@
-import { component$, useStore, useRef, useEffect$ } from '@builder.io/qwik'
+import { component$, useStore } from '@builder.io/qwik'
 import './Options.css'
 
-export const Options = () => {
-  const [crx, setCrx] = useState('create-chrome-ext')
+export const Options = component$(
+  (props) => {
+    const crx = useStore('create-chrome-ext')
 
-  return (
-    <main>
-      <h3>Options Page!</h3>
+    return (
+      <main>
+        <h3>Options Page!</h3>
 
-      <h6>v 0.0.0</h6>
+        <h6>v 0.0.0</h6>
 
-      <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
-        Power by {crx}
-      </a>
-    </main>
-  )
-}
+        <a href="https://www.npmjs.com/package/create-chrome-ext" target="_blank">
+          Power by {crx}
+        </a>
+      </main>
+    )
+  },
+  {
+    name: 'Options',
+  },
+)
 
 export default Options
diff --git a/template-qwik-js/src/options/index.jsx b/template-qwik-js/src/options/index.jsx
@@ -1,5 +1,6 @@
-import { render } from 'preact'
+import { render, jsx } from '@builder.io/qwik'
+
 import { Options } from './Options'
 import './index.css'
 
-render(<Options />, document.getElementById('app'))
+render(document.getElementById('app') ?? document.body, jsx(Options, {}))
diff --git a/template-qwik-js/src/popup/Popup.jsx b/template-qwik-js/src/popup/Popup.jsx
@@ -1,24 +1,9 @@
-import { component$, useStore, useRef, useEffect$ } from '@builder.io/qwik'
+import { component$, useStore } from '@builder.io/qwik'
 import './Popup.css'
 
-/**
- * Individual items of the component.
- *
- * It only rerenders if the user infarcts with it or if the item itself changes.
- */
-export interface Props {}
-
 export const Popup = component$(
-  (props: Props) => {
-    const state = useStore({ editing: false })
-
-    useEffect$((obs) => {
-      const { current } = obs(editInput)
-      if (current) {
-        current.focus()
-        current.selectionStart = current.selectionEnd = current.value.length
-      }
-    })
+  (props) => {
+    const crx = useStore('create-chrome-ext')
 
     return (
       <main>
@@ -33,7 +18,7 @@ export const Popup = component$(
     )
   },
   {
-    tagName: 'li',
+    name: 'Popup',
   },
 )
 

diff --git a/template-qwik-js/src/popup/index.jsx b/template-qwik-js/src/popup/index.jsx
@@ -1,26 +1,6 @@
-import { component$, useStore } from '@builder.io/qwik'
+import { render, jsx } from '@builder.io/qwik'
 
+import { Popup } from './Popup'
 import './index.css'
 
-/**
- * Overall application component.
- *
- * This component is static (meaning it will never change). Because of this
- * Qwik knows that it should never need to be rerendered, and its code will never
- * download to the client.
- */
-export const Main = component$(() => {
-  const todos = useStore({
-    filter: 'all',
-    items: [
-      { completed: false, title: 'Read Qwik dhocs' },
-      { completed: false, title: 'Build HelloWorld' },
-      { completed: false, title: 'Profit' },
-    ],
-  })
-  return (
-    <section class="todoapp">
-      <Header todos={todos} />
-    </section>
-  )
-})
+render(document.getElementById('#app') ?? document.body, jsx(Popup, {}))
diff --git a/template-qwik-js/vit.config.js b/template-qwik-js/vit.config.js
diff --git a/template-qwik-js/vite.config.js b/template-qwik-js/vite.config.js
@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite'
+import { qwikVite } from '@builder.io/qwik/optimizer'
+import { dirname, resolve } from 'path'
+import { writeFile, mkdir } from 'fs/promises'
+import { crx } from '@crxjs/vite-plugin'
+
+import manifest from './src/manifest.js'
+
+export default defineConfig(({ mode }) => {
+  return {
+    build: {
+      emptyOutDir: true,
+      outDir: 'build',
+      rollupOptions: {
+        output: {
+          chunkFileNames: 'assets/chunk-[hash].js',
+        },
+      },
+    },
+    plugins: [
+      crx({ manifest }),
+      // qwikVite({
+      //   // On `clientonly` mode, lets disable SSR in development, so app is fully client bootstrapped
+      //   ssr: mode === 'clientonly' ? false : undefined,
+      //   srcDir: resolve('./src'),
+      //   entryStrategy: {
+      //     type: 'single',
+      //   },
+      //   // symbolsOutput: (data) => {
+      //   //   outputJSON('./server/q-symbols.json', data)
+      //   // },
+      // }),
+    ],
+  }
+})
+
+async function outputJSON(path, data) {
+  await mkdir(dirname(path), { recursive: true })
+  await writeFile(path, JSON.stringify(data, null, 2))
+}
diff --git a/template-qwik-ts/src/background/index.ts b/template-qwik-ts/src/background/index.ts
@@ -1,3 +1,3 @@
-console.info('chrome-ext template-preact-ts background script')
+console.info('chrome-ext template-qwik-ts background script')
 
 export {}
diff --git a/template-qwik-ts/src/content/index.ts b/template-qwik-ts/src/content/index.ts
@@ -1,3 +1,3 @@
-console.info('chrome-ext template-preact-ts content script')
+console.info('chrome-ext template-qwik-ts content script')
 
 export {}
diff --git a/template-qwik-ts/src/global.d.ts b/template-qwik-ts/src/global.d.ts
@@ -1,3 +1 @@
 /// <reference types="vite/client" />
-
-import JSX = preact.JSX
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1 @@
		/// <reference types="vite/client" />

		import JSX = preact.JSX