diff --git a/template-qwik-ts/options.html b/template-qwik-ts/options.html index df280e7..c93a838 100644 --- a/template-qwik-ts/options.html +++ b/template-qwik-ts/options.html @@ -1,18 +1,13 @@ - - - + - - Qwik Client Dev Mode - + + + + Chrome Extensioin + Qwik + TS + Vite App - Options - +
+ diff --git a/template-qwik-ts/package.json b/template-qwik-ts/package.json index 5a80a8c..0ee9958 100644 --- 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 index df280e7..f8be340 100644 --- a/template-qwik-ts/popup.html +++ b/template-qwik-ts/popup.html @@ -1,18 +1,13 @@ - - - + - - Qwik Client Dev Mode - + + + + Chrome Extensioin + Qwik + TS + Vite App - Popup - +
+ diff --git a/template-qwik-ts/src/options/Options.tsx b/template-qwik-ts/src/options/Options.tsx index e371685..0a3a211 100644 --- 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 ( -
-

Options Page!

+ +
+

Options Page!

-
v 0.0.0
+
v 0.0.0
- - Power by {crx} - -
+ + Power by {crx} + +
+ ) -} +}) export default Options diff --git a/template-qwik-ts/src/options/index.tsx b/template-qwik-ts/src/options/index.tsx index 6cb87c7..1164705 100644 --- 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(, 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 index e61e8ea..6844cac 100644 --- 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() +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 ( +

Popup Page!

@@ -31,11 +17,8 @@ export const Popup = component$( Power by {crx}
- ) - }, - { - tagName: 'li', - }, -) + + ) +}) export default Popup diff --git a/template-qwik-ts/src/popup/index.tsx b/template-qwik-ts/src/popup/index.tsx index 80e9a59..f938bf0 100644 --- 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 ( -
-
-
- ) -}) +render(document.getElementById('app') ?? document.body, jsx(Popup, {})) diff --git a/template-qwik-ts/tsconfig.json b/template-qwik-ts/tsconfig.json deleted file mode 100644 index fe343d6..0000000 --- a/template-qwik-ts/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "compilerOptions": { - "target": "ES2017", - "module": "ES2020", - "lib": ["es2020", "DOM"], - "jsx": "react-jsx", - "jsxImportSource": "@builder.io/qwik", - "strict": true, - "resolveJsonModule": true, - "moduleResolution": "node", - "esModuleInterop": true, - "skipLibCheck": true, - "incremental": true, - "isolatedModules": true, - "types": ["vite/client"] - }, - "include": ["src"] -} diff --git a/template-qwik-ts/tsconfig.node.json b/template-qwik-ts/tsconfig.node.json new file mode 100644 index 0000000..a75fb40 --- /dev/null +++ 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 b/template-qwik-ts/vite.config.ts similarity index 63% rename from template-qwik-ts/vit.config.ts rename to template-qwik-ts/vite.config.ts index a81668c..de6d8a2 100644 --- a/template-qwik-ts/vit.config.ts +++ b/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',