From 74a8e49a8425e1e3733c755304907cb92ef73269 Mon Sep 17 00:00:00 2001 From: yalda Date: Wed, 6 Jul 2022 02:09:11 +0800 Subject: [PATCH] fix(qwik):dev run-scripts --- template-qwik-js/options.html | 19 ++++------- template-qwik-js/package.json | 6 ++-- template-qwik-js/popup.html | 19 ++++------- template-qwik-js/src/background/index.js | 2 +- template-qwik-js/src/content/index.js | 2 +- template-qwik-js/src/options/Options.jsx | 31 ++++++++++-------- template-qwik-js/src/options/index.jsx | 5 +-- template-qwik-js/src/popup/Popup.jsx | 23 +++---------- template-qwik-js/src/popup/index.jsx | 26 ++------------- template-qwik-js/vit.config.js | 41 ------------------------ template-qwik-js/vite.config.js | 40 +++++++++++++++++++++++ template-qwik-ts/src/background/index.ts | 2 +- template-qwik-ts/src/content/index.ts | 2 +- template-qwik-ts/src/global.d.ts | 2 -- 14 files changed, 89 insertions(+), 131 deletions(-) delete mode 100644 template-qwik-js/vit.config.js create mode 100644 template-qwik-js/vite.config.js 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