From abcc65c5eeb16ce8f95c2b194a13482f005a4fbb Mon Sep 17 00:00:00 2001 From: datavalley Date: Wed, 15 Jan 2025 17:41:17 +0100 Subject: [PATCH] =?UTF-8?q?Initial=20commit=20=E2=9A=A1=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 38 ++++++++ .eslintrc.cjs | 42 ++++++++ .gitignore | 42 ++++++++ .prettierignore | 37 +++++++ .vscode/launch.json | 24 +++++ .vscode/qwik-city.code-snippets | 36 +++++++ .vscode/qwik.code-snippets | 78 +++++++++++++++ README.md | 65 +++++++++++++ package.json | 44 +++++++++ public/favicon.svg | 1 + public/manifest.json | 9 ++ public/robots.txt | 0 qwik.env.d.ts | 4 + src/components/router-head/router-head.tsx | 48 ++++++++++ src/entry.dev.tsx | 17 ++++ src/entry.preview.tsx | 21 ++++ src/entry.ssr.tsx | 33 +++++++ src/global.css | 0 src/root.tsx | 38 ++++++++ src/routes/index.tsx | 25 +++++ src/routes/layout.tsx | 17 ++++ src/routes/service-worker.ts | 18 ++++ tsconfig.json | 25 +++++ vite.config.ts | 106 +++++++++++++++++++++ 24 files changed, 768 insertions(+) create mode 100644 .eslintignore create mode 100644 .eslintrc.cjs create mode 100644 .gitignore create mode 100644 .prettierignore create mode 100644 .vscode/launch.json create mode 100644 .vscode/qwik-city.code-snippets create mode 100644 .vscode/qwik.code-snippets create mode 100644 README.md create mode 100644 package.json create mode 100644 public/favicon.svg create mode 100644 public/manifest.json create mode 100644 public/robots.txt create mode 100644 qwik.env.d.ts create mode 100644 src/components/router-head/router-head.tsx create mode 100644 src/entry.dev.tsx create mode 100644 src/entry.preview.tsx create mode 100644 src/entry.ssr.tsx create mode 100644 src/global.css create mode 100644 src/root.tsx create mode 100644 src/routes/index.tsx create mode 100644 src/routes/layout.tsx create mode 100644 src/routes/service-worker.ts create mode 100644 tsconfig.json create mode 100644 vite.config.ts diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..1acecc1 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,38 @@ +**/*.log +**/.DS_Store +*. +.vscode/settings.json +.history +.yarn +bazel-* +bazel-bin +bazel-out +bazel-qwik +bazel-testlogs +dist +dist-dev +lib +lib-types +etc +external +node_modules +temp +tsc-out +tsdoc-metadata.json +target +output +rollup.config.js +build +.cache +.vscode +.rollup.cache +dist +tsconfig.tsbuildinfo +vite.config.ts +*.spec.tsx +*.spec.ts +.netlify +pnpm-lock.yaml +package-lock.json +yarn.lock +server diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..70dc5d0 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,42 @@ +module.exports = { + root: true, + env: { + browser: true, + es2021: true, + node: true, + }, + extends: [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:qwik/recommended", + ], + parser: "@typescript-eslint/parser", + parserOptions: { + tsconfigRootDir: __dirname, + project: ["./tsconfig.json"], + ecmaVersion: 2021, + sourceType: "module", + ecmaFeatures: { + jsx: true, + }, + }, + plugins: ["@typescript-eslint"], + rules: { + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/no-empty-interface": "off", + "@typescript-eslint/no-namespace": "off", + "@typescript-eslint/no-empty-function": "off", + "@typescript-eslint/no-this-alias": "off", + "@typescript-eslint/ban-types": "off", + "@typescript-eslint/ban-ts-comment": "off", + "prefer-spread": "off", + "no-case-declarations": "off", + "no-console": "off", + "@typescript-eslint/no-unused-vars": ["error"], + "@typescript-eslint/consistent-type-imports": "warn", + "@typescript-eslint/no-unnecessary-condition": "warn", + }, +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4183fdf --- /dev/null +++ b/.gitignore @@ -0,0 +1,42 @@ +# Build +/dist +/lib +/lib-types +/server + +# Development +node_modules +.env +*.local + +# Cache +.cache +.mf +.rollup.cache +tsconfig.tsbuildinfo + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +# Editor +.vscode/* +!.vscode/launch.json +!.vscode/*.code-snippets + +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +# Yarn +.yarn/* +!.yarn/releases diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..b62a968 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,37 @@ +**/*.log +**/.DS_Store +*. +.vscode/settings.json +.history +.yarn +bazel-* +bazel-bin +bazel-out +bazel-qwik +bazel-testlogs +dist +dist-dev +lib +lib-types +etc +external +node_modules +temp +tsc-out +tsdoc-metadata.json +target +output +rollup.config.js +build +.cache +.vscode +.rollup.cache +tsconfig.tsbuildinfo +vite.config.ts +*.spec.tsx +*.spec.ts +.netlify +pnpm-lock.yaml +package-lock.json +yarn.lock +server diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..e684cc8 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,24 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Launch Chrome", + "request": "launch", + "type": "chrome", + "url": "http://localhost:5173", + "webRoot": "${workspaceFolder}" + }, + { + "type": "node", + "name": "dev.debug", + "request": "launch", + "skipFiles": ["/**"], + "cwd": "${workspaceFolder}", + "program": "${workspaceFolder}/node_modules/vite/bin/vite.js", + "args": ["--mode", "ssr", "--force"] + } + ] +} diff --git a/.vscode/qwik-city.code-snippets b/.vscode/qwik-city.code-snippets new file mode 100644 index 0000000..878fcf6 --- /dev/null +++ b/.vscode/qwik-city.code-snippets @@ -0,0 +1,36 @@ +{ + "onRequest": { + "scope": "javascriptreact,typescriptreact", + "prefix": "qonRequest", + "description": "onRequest function for a route index", + "body": [ + "export const onRequest: RequestHandler = (request) => {", + " $0", + "};", + ], + }, + "loader$": { + "scope": "javascriptreact,typescriptreact", + "prefix": "qloader$", + "description": "loader$()", + "body": ["export const $1 = routeLoader$(() => {", " $0", "});"], + }, + "action$": { + "scope": "javascriptreact,typescriptreact", + "prefix": "qaction$", + "description": "action$()", + "body": ["export const $1 = routeAction$((data) => {", " $0", "});"], + }, + "Full Page": { + "scope": "javascriptreact,typescriptreact", + "prefix": "qpage", + "description": "Simple page component", + "body": [ + "import { component$ } from '@builder.io/qwik';", + "", + "export default component$(() => {", + " $0", + "});", + ], + }, +} diff --git a/.vscode/qwik.code-snippets b/.vscode/qwik.code-snippets new file mode 100644 index 0000000..62edc82 --- /dev/null +++ b/.vscode/qwik.code-snippets @@ -0,0 +1,78 @@ +{ + "Qwik component (simple)": { + "scope": "javascriptreact,typescriptreact", + "prefix": "qcomponent$", + "description": "Simple Qwik component", + "body": [ + "export const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}} = component$(() => {", + " return <${2:div}>$4", + "});", + ], + }, + "Qwik component (props)": { + "scope": "typescriptreact", + "prefix": "qcomponent$ + props", + "description": "Qwik component w/ props", + "body": [ + "export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Props {", + " $2", + "}", + "", + "export const $1 = component$<$1Props>((props) => {", + " const ${2:count} = useSignal(0);", + " return (", + " <${3:div} on${4:Click}$={(ev) => {$5}}>", + " $6", + " ", + " );", + "});", + ], + }, + "Qwik signal": { + "scope": "javascriptreact,typescriptreact", + "prefix": "quseSignal", + "description": "useSignal() declaration", + "body": ["const ${1:foo} = useSignal($2);", "$0"], + }, + "Qwik store": { + "scope": "javascriptreact,typescriptreact", + "prefix": "quseStore", + "description": "useStore() declaration", + "body": ["const ${1:state} = useStore({", " $2", "});", "$0"], + }, + "$ hook": { + "scope": "javascriptreact,typescriptreact", + "prefix": "q$", + "description": "$() function hook", + "body": ["$(() => {", " $0", "});", ""], + }, + "useVisibleTask": { + "scope": "javascriptreact,typescriptreact", + "prefix": "quseVisibleTask", + "description": "useVisibleTask$() function hook", + "body": ["useVisibleTask$(({ track }) => {", " $0", "});", ""], + }, + "useTask": { + "scope": "javascriptreact,typescriptreact", + "prefix": "quseTask$", + "description": "useTask$() function hook", + "body": [ + "useTask$(({ track }) => {", + " track(() => $1);", + " $0", + "});", + "", + ], + }, + "useResource": { + "scope": "javascriptreact,typescriptreact", + "prefix": "quseResource$", + "description": "useResource$() declaration", + "body": [ + "const $1 = useResource$(({ track, cleanup }) => {", + " $0", + "});", + "", + ], + }, +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..73a6dcc --- /dev/null +++ b/README.md @@ -0,0 +1,65 @@ +# Qwik City App ⚡️ + +- [Qwik Docs](https://qwik.dev/) +- [Discord](https://qwik.dev/chat) +- [Qwik GitHub](https://github.com/QwikDev/qwik) +- [@QwikDev](https://twitter.com/QwikDev) +- [Vite](https://vitejs.dev/) + +--- + +## Project Structure + +This project is using Qwik with [QwikCity](https://qwik.dev/qwikcity/overview/). QwikCity is just an extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more. + +Inside your project, you'll see the following directory structure: + +``` +├── public/ +│ └── ... +└── src/ + ├── components/ + │ └── ... + └── routes/ + └── ... +``` + +- `src/routes`: Provides the directory-based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.dev/qwikcity/routing/overview/) for more info. + +- `src/components`: Recommended directory for components. + +- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info. + +## Add Integrations and deployment + +Use the `pnpm qwik add` command to add additional integrations. Some examples of integrations includes: Cloudflare, Netlify or Express Server, and the [Static Site Generator (SSG)](https://qwik.dev/qwikcity/guides/static-site-generation/). + +```shell +pnpm qwik add # or `pnpm qwik add` +``` + +## Development + +Development mode uses [Vite's development server](https://vitejs.dev/). The `dev` command will server-side render (SSR) the output during development. + +```shell +npm start # or `pnpm start` +``` + +> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build. + +## Preview + +The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to preview a production build locally and should not be used as a production server. + +```shell +pnpm preview # or `pnpm preview` +``` + +## Production + +The production build will generate client and server modules by running both client and server build commands. The build command will use Typescript to run a type check on the source code. + +```shell +pnpm build # or `pnpm build` +``` diff --git a/package.json b/package.json new file mode 100644 index 0000000..ea4175b --- /dev/null +++ b/package.json @@ -0,0 +1,44 @@ +{ + "name": "my-qwik-empty-starter", + "description": "Blank project with routing included", + "engines": { + "node": "^18.17.0 || ^20.3.0 || >=21.0.0" + }, + "engines-annotation": "Mostly required by sharp which needs a Node-API v9 compatible runtime", + "private": true, + "trustedDependencies": [ + "sharp" + ], + "trustedDependencies-annotation": "Needed for bun to allow running install scripts", + "type": "module", + "scripts": { + "build": "qwik build", + "build.client": "vite build", + "build.preview": "vite build --ssr src/entry.preview.tsx", + "build.types": "tsc --incremental --noEmit", + "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'", + "dev": "vite --mode ssr", + "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force", + "fmt": "prettier --write .", + "fmt.check": "prettier --check .", + "lint": "eslint \"src/**/*.ts*\"", + "preview": "qwik build preview && vite preview --open", + "start": "vite --open --mode ssr", + "qwik": "qwik" + }, + "devDependencies": { + "@builder.io/qwik": "^1.12.0", + "@builder.io/qwik-city": "^1.12.0", + "@types/eslint": "8.56.10", + "@types/node": "20.14.11", + "@typescript-eslint/eslint-plugin": "7.16.1", + "@typescript-eslint/parser": "7.16.1", + "eslint": "8.57.0", + "eslint-plugin-qwik": "^1.12.0", + "prettier": "3.3.3", + "typescript": "5.4.5", + "undici": "*", + "vite": "5.3.5", + "vite-tsconfig-paths": "^4.2.1" + } +} diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..0ded7c1 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..c18e75f --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,9 @@ +{ + "$schema": "https://json.schemastore.org/web-manifest-combined.json", + "name": "qwik-project-name", + "short_name": "Welcome to Qwik", + "start_url": ".", + "display": "standalone", + "background_color": "#fff", + "description": "A Qwik project app." +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..e69de29 diff --git a/qwik.env.d.ts b/qwik.env.d.ts new file mode 100644 index 0000000..25af92b --- /dev/null +++ b/qwik.env.d.ts @@ -0,0 +1,4 @@ +// This file can be used to add references for global types like `vite/client`. + +// Add global `vite/client` types. For more info, see: https://vitejs.dev/guide/features#client-types +/// diff --git a/src/components/router-head/router-head.tsx b/src/components/router-head/router-head.tsx new file mode 100644 index 0000000..da5b68f --- /dev/null +++ b/src/components/router-head/router-head.tsx @@ -0,0 +1,48 @@ +import { component$ } from "@builder.io/qwik"; +import { useDocumentHead, useLocation } from "@builder.io/qwik-city"; + +/** + * The RouterHead component is placed inside of the document `` element. + */ +export const RouterHead = component$(() => { + const head = useDocumentHead(); + const loc = useLocation(); + + return ( + <> + {head.title} + + + + + + {head.meta.map((m) => ( + + ))} + + {head.links.map((l) => ( + + ))} + + {head.styles.map((s) => ( +