debug(qwik):debug for run success, but had not working yet

capsule-org · Jul 5, 2022 · dbbe41b · dbbe41b
1 parent 2f6b1aa
commit dbbe41b
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 120 deletions.
diff --git a/template-qwik-ts/options.html b/template-qwik-ts/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 + TS + 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.tsx';
-      render(document.body, jsx(Main, {}));
-    </script>
+    <div id="app"></div>
+    <script type="module" src="/src/options/index.tsx"></script>
   </body>
 </html>
diff --git a/template-qwik-ts/package.json b/template-qwik-ts/package.json
@@ -18,15 +18,17 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build.client": "vite build --outDir server/public",
     "preview": "vite preview",
     "fmt": "prettier --write '**/*.{tsx,ts,json,css,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",
+    "express": "4.17.2",
     "prettier": "^2.7.1",
-    "typescript": "4.7.4",
-    "vite": "2.9.13"
+    "typescript": "^4.7.4",
+    "vite": "^2.9.13"
   }
 }
diff --git a/template-qwik-ts/popup.html b/template-qwik-ts/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 + TS + 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.tsx';
-      render(document.body, jsx(Main, {}));
-    </script>
+    <div id="app"></div>
+    <script type="module" src="/src/popup/index.tsx"></script>
   </body>
 </html>
diff --git a/template-qwik-ts/src/options/Options.tsx b/template-qwik-ts/src/options/Options.tsx
@@ -1,20 +1,24 @@
-import { useState } from 'preact/hooks'
+import { component$, Host } from '@builder.io/qwik'
 import './Options.css'
 
-export const Options = () => {
-  const [crx, setCrx] = useState('create-chrome-ext')
+interface Props {}
+
+export const Options = component$((props: Props) => {
+  const crx = 'create-chrome-ext'
 
   return (
-    <main>
-      <h3>Options Page!</h3>
+    <Host>
+      <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>
+    </Host>
   )
-}
+})
 
 export default Options
diff --git a/template-qwik-ts/src/options/index.tsx b/template-qwik-ts/src/options/index.tsx
@@ -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') as HTMLElement)
+render(document.getElementById('app') ?? document.body, jsx(Options, {}))
diff --git a/template-qwik-ts/src/popup/Popup.tsx b/template-qwik-ts/src/popup/Popup.tsx
@@ -1,27 +1,13 @@
-import { component$, useStore, Host, useRef, useEffect$ } from '@builder.io/qwik'
+import { component$, useStore, Host } 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 {}
+interface Props {}
 
-export const Popup = component$(
-  (props: Props) => {
-    const state = useStore({ editing: false })
-    const editInput = useRef<HTMLInputElement>()
+export const Popup = component$((props: Props) => {
+  const crx = 'create-chrome-ext'
 
-    useEffect$((obs) => {
-      const { current } = obs(editInput)
-      if (current) {
-        current.focus()
-        current.selectionStart = current.selectionEnd = current.value.length
-      }
-    })
-
-    return (
+  return (
+    <Host>
       <main>
         <h3>Popup Page!</h3>
 
@@ -31,11 +17,8 @@ export const Popup = component$(
           Power by {crx}
         </a>
       </main>
-    )
-  },
-  {
-    tagName: 'li',
-  },
-)
+    </Host>
+  )
+})
 
 export default Popup
diff --git a/template-qwik-ts/src/popup/index.tsx b/template-qwik-ts/src/popup/index.tsx
@@ -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-ts/tsconfig.json b/template-qwik-ts/tsconfig.json
diff --git a/template-qwik-ts/tsconfig.node.json b/template-qwik-ts/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": ["vite.config.ts", "src/**/*.ts"]
+}
diff --git a/template-qwik-ts/vit.config.ts → template-qwik-ts/vite.config.ts b/template-qwik-ts/vit.config.ts → template-qwik-ts/vite.config.ts
@@ -8,21 +8,14 @@ import manifest from './src/manifest'
 
 export default defineConfig(({ mode }) => {
   return {
-    // build: {
-    //   rollupOptions: {
-    //     input: ['src/main.tsx', 'index.html'],
-    //     output: {
-    //       // Qwik tends to generate long chunk names
-    //       chunkFileNames: 'q-[hash].js',
-    //       assetFileNames: 'q-[hash].[ext]',
-    //     },
-    //   },
-    // },
     build: {
       emptyOutDir: true,
       outDir: 'build',
       rollupOptions: {
-        input: ['src/popup/index.tsx', 'popup.html', 'src/options/index.tsx', 'options.html'],
+        // input: {
+        //   popup: resolve(__dirname, 'popup.html'),
+        //   options: resolve(__dirname, 'options.html'),
+        // },
         output: {
           chunkFileNames: 'assets/chunk-[hash].js',
         },
@@ -31,8 +24,6 @@ export default defineConfig(({ mode }) => {
     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',