diff --git a/template-qwik-js/options.html b/template-qwik-js/options.html
index 1798ab2..63660a8 100644
--- a/template-qwik-js/options.html
+++ b/template-qwik-js/options.html
@@ -1,18 +1,13 @@
-
-
-
+
-
- Qwik Client Dev Mode
-
+
+
+
+ Chrome Extensioin + Qwik + JS + Vite App - Options
-
+
+
diff --git a/template-qwik-js/package.json b/template-qwik-js/package.json
index e1a3470..9402810 100644
--- 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
index 1798ab2..2db7c13 100644
--- a/template-qwik-js/popup.html
+++ b/template-qwik-js/popup.html
@@ -1,18 +1,13 @@
-
-
-
+
-
- Qwik Client Dev Mode
-
+
+
+
+ Chrome Extensioin + Qwik + JS + Vite App - Popup
-
+
+
diff --git a/template-qwik-js/src/background/index.js b/template-qwik-js/src/background/index.js
index 7aa479a..09c91f8 100644
--- 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
index 0174946..eaa6a2f 100644
--- 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
index f3683fc..4f02e4e 100644
--- 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 (
-
- Options Page!
+ return (
+
+ Options Page!
- v 0.0.0
+ v 0.0.0
-
- Power by {crx}
-
-
- )
-}
+
+ Power by {crx}
+
+
+ )
+ },
+ {
+ name: 'Options',
+ },
+)
export default Options
diff --git a/template-qwik-js/src/options/index.jsx b/template-qwik-js/src/options/index.jsx
index ba4b187..1164705 100644
--- 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(, 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
index 1ecedd8..85d478e 100644
--- 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 (
@@ -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
index 80e9a59..bbff301 100644
--- 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 (
-
- )
-})
+render(document.getElementById('#app') ?? document.body, jsx(Popup, {}))
diff --git a/template-qwik-js/vit.config.js b/template-qwik-js/vit.config.js
deleted file mode 100644
index bc741be..0000000
--- a/template-qwik-js/vit.config.js
+++ /dev/null
@@ -1,41 +0,0 @@
-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: {
- rollupOptions: {
- input: ['src/popup/index.jsx', 'popup.html'],
- output: {
- // Qwik tends to generate long chunk names
- chunkFileNames: 'q-[hash].js',
- assetFileNames: 'q-[hash].[ext]',
- },
- },
- },
- 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: string, data: any) {
- await mkdir(dirname(path), { recursive: true })
- await writeFile(path, JSON.stringify(data, null, 2))
-}
diff --git a/template-qwik-js/vite.config.js b/template-qwik-js/vite.config.js
new file mode 100644
index 0000000..76065e7
--- /dev/null
+++ 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
index 7aa479a..09c91f8 100644
--- 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
index 0174946..eaa6a2f 100644
--- 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
index 71d967c..11f02fe 100644
--- a/template-qwik-ts/src/global.d.ts
+++ b/template-qwik-ts/src/global.d.ts
@@ -1,3 +1 @@
///
-
-import JSX = preact.JSX