From 6d6b2c6750378e79126153dd34a2cca20aaad8c0 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Tue, 21 Feb 2023 21:50:02 +0000 Subject: [PATCH 1/3] feat(qwik): add Qwik support --- README.md | 3 +- examples/qwik/.eslintignore | 38 + examples/qwik/.eslintrc.cjs | 41 + examples/qwik/.gitignore | 38 + examples/qwik/.prettierignore | 38 + examples/qwik/README.md | 65 + examples/qwik/package.json | 43 + examples/qwik/public/favicon.svg | 1 + examples/qwik/public/manifest.json | 9 + examples/qwik/public/robots.txt | 0 .../qwik/src/components/header/header.css | 34 + .../qwik/src/components/header/header.tsx | 34 + examples/qwik/src/components/icons/qwik.tsx | 32 + .../components/router-head/router-head.tsx | 32 + examples/qwik/src/entry.dev.tsx | 17 + examples/qwik/src/entry.preview.tsx | 20 + examples/qwik/src/entry.ssr.tsx | 27 + examples/qwik/src/global.css | 127 + examples/qwik/src/root.tsx | 28 + examples/qwik/src/routes/index.tsx | 42 + examples/qwik/src/routes/layout.tsx | 9 + examples/qwik/src/routes/service-worker.ts | 18 + examples/qwik/tsconfig.json | 26 + examples/qwik/vite.config.ts | 15 + package.json | 4 +- packages/core/package.json | 2 +- packages/qwik/.eslintignore | 31 + packages/qwik/.eslintrc.cjs | 40 + packages/qwik/.gitignore | 38 + packages/qwik/.prettierignore | 6 + packages/qwik/README.md | 41 + packages/qwik/package.json | 55 + packages/qwik/src/components/image.tsx | 9 + packages/qwik/src/index.ts | 1 + packages/qwik/tsconfig.json | 27 + packages/qwik/vite.config.ts | 19 + release-please-config.json | 5 +- yarn.lock | 2303 ++++++++++++++++- 38 files changed, 3261 insertions(+), 57 deletions(-) create mode 100644 examples/qwik/.eslintignore create mode 100644 examples/qwik/.eslintrc.cjs create mode 100644 examples/qwik/.gitignore create mode 100644 examples/qwik/.prettierignore create mode 100644 examples/qwik/README.md create mode 100644 examples/qwik/package.json create mode 100644 examples/qwik/public/favicon.svg create mode 100644 examples/qwik/public/manifest.json create mode 100644 examples/qwik/public/robots.txt create mode 100644 examples/qwik/src/components/header/header.css create mode 100644 examples/qwik/src/components/header/header.tsx create mode 100644 examples/qwik/src/components/icons/qwik.tsx create mode 100644 examples/qwik/src/components/router-head/router-head.tsx create mode 100644 examples/qwik/src/entry.dev.tsx create mode 100644 examples/qwik/src/entry.preview.tsx create mode 100644 examples/qwik/src/entry.ssr.tsx create mode 100644 examples/qwik/src/global.css create mode 100644 examples/qwik/src/root.tsx create mode 100644 examples/qwik/src/routes/index.tsx create mode 100644 examples/qwik/src/routes/layout.tsx create mode 100644 examples/qwik/src/routes/service-worker.ts create mode 100644 examples/qwik/tsconfig.json create mode 100644 examples/qwik/vite.config.ts create mode 100644 packages/qwik/.eslintignore create mode 100644 packages/qwik/.eslintrc.cjs create mode 100644 packages/qwik/.gitignore create mode 100644 packages/qwik/.prettierignore create mode 100644 packages/qwik/README.md create mode 100644 packages/qwik/package.json create mode 100644 packages/qwik/src/components/image.tsx create mode 100644 packages/qwik/src/index.ts create mode 100644 packages/qwik/tsconfig.json create mode 100644 packages/qwik/vite.config.ts diff --git a/README.md b/README.md index c7ae4975..a00447ce 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ A cross-framework component for responsive, high-performance images using image CDNs. -[`@unpic/react`](https://github.com/ascorbic/unpic-img/tree/main/packages/react) • [`@unpic/vue`](https://github.com/ascorbic/unpic-img/tree/main/packages/vue) • [`@unpic/solid`](https://github.com/ascorbic/unpic-img/tree/main/packages/solid) • [`@unpic/svelte`](https://github.com/ascorbic/unpic-img/tree/main/packages/svelte) • [`@unpic/astro`](https://github.com/ascorbic/unpic-img/tree/main/packages/astro) • [`@unpic/preact`](https://github.com/ascorbic/unpic-img/tree/main/packages/preact) +[`@unpic/react`](https://github.com/ascorbic/unpic-img/tree/main/packages/react) • [`@unpic/vue`](https://github.com/ascorbic/unpic-img/tree/main/packages/vue) • [`@unpic/solid`](https://github.com/ascorbic/unpic-img/tree/main/packages/solid) • [`@unpic/svelte`](https://github.com/ascorbic/unpic-img/tree/main/packages/svelte) • [`@unpic/astro`](https://github.com/ascorbic/unpic-img/tree/main/packages/astro) • [`@unpic/preact`](https://github.com/ascorbic/unpic-img/tree/main/packages/preact) • [`@unpic/qwik`](https://github.com/ascorbic/unpic-img/tree/main/packages/qwik) ## Features @@ -27,6 +27,7 @@ For details of usage, see the individual framework packages: - [`@unpic/svelte`](https://github.com/ascorbic/unpic-img/tree/main/packages/svelte) - [`@unpic/astro`](https://github.com/ascorbic/unpic-img/tree/main/packages/astro) - [`@unpic/preact`](https://github.com/ascorbic/unpic-img/tree/main/packages/preact) +- [`@unpic/qwik`](https://github.com/ascorbic/unpic-img/tree/main/packages/qwik) ## FAQ diff --git a/examples/qwik/.eslintignore b/examples/qwik/.eslintignore new file mode 100644 index 00000000..1acecc10 --- /dev/null +++ b/examples/qwik/.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/examples/qwik/.eslintrc.cjs b/examples/qwik/.eslintrc.cjs new file mode 100644 index 00000000..039b99a0 --- /dev/null +++ b/examples/qwik/.eslintrc.cjs @@ -0,0 +1,41 @@ +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', + }, +}; diff --git a/examples/qwik/.gitignore b/examples/qwik/.gitignore new file mode 100644 index 00000000..df86981d --- /dev/null +++ b/examples/qwik/.gitignore @@ -0,0 +1,38 @@ +# Build +/dist +/lib +/lib-types +/server + +# Development +node_modules + +# 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/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +# Yarn +.yarn/* +!.yarn/releases diff --git a/examples/qwik/.prettierignore b/examples/qwik/.prettierignore new file mode 100644 index 00000000..1acecc10 --- /dev/null +++ b/examples/qwik/.prettierignore @@ -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/examples/qwik/README.md b/examples/qwik/README.md new file mode 100644 index 00000000..52c3197d --- /dev/null +++ b/examples/qwik/README.md @@ -0,0 +1,65 @@ +# Qwik City App ⚡️ + +- [Qwik Docs](https://qwik.builder.io/) +- [Discord](https://qwik.builder.io/chat) +- [Qwik GitHub](https://github.com/BuilderIO/qwik) +- [@QwikDev](https://twitter.com/QwikDev) +- [Vite](https://vitejs.dev/) + +--- + +## Project Structure + +This project is using Qwik with [QwikCity](https://qwik.builder.io/qwikcity/overview/). QwikCity is just a 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.builder.io/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 `yarn qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/guides/static-site-generation/). + +```shell +yarn qwik add # or `yarn qwik add` +``` + +## Development + +Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output. + +```shell +npm start # or `yarn 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 locally preview a production build, and it should not be used as a production server. + +```shell +yarn preview # or `yarn preview` +``` + +## Production + +The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code. + +```shell +yarn build # or `yarn build` +``` diff --git a/examples/qwik/package.json b/examples/qwik/package.json new file mode 100644 index 00000000..05551629 --- /dev/null +++ b/examples/qwik/package.json @@ -0,0 +1,43 @@ +{ + "name": "my-qwik-basic-starter", + "description": "App with Routing built-in (recommended)", + "engines": { + "node": ">=15.0.0" + }, + "private": true, + "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": "0.19.0", + "@builder.io/qwik-city": "0.3.0", + "@types/eslint": "8.21.1", + "@types/node": "^18.14.0", + "@types/node-fetch": "latest", + "@typescript-eslint/eslint-plugin": "5.52.0", + "@typescript-eslint/parser": "5.52.0", + "eslint": "8.34.0", + "eslint-plugin-qwik": "0.19.0", + "node-fetch": "3.3.0", + "prettier": "2.8.4", + "typescript": "4.9.5", + "undici": "5.20.0", + "vite": "4.1.2", + "vite-tsconfig-paths": "3.5.0" + }, + "dependencies": { + "@unpic/qwik": "workspace:^" + } +} diff --git a/examples/qwik/public/favicon.svg b/examples/qwik/public/favicon.svg new file mode 100644 index 00000000..0ded7c13 --- /dev/null +++ b/examples/qwik/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/qwik/public/manifest.json b/examples/qwik/public/manifest.json new file mode 100644 index 00000000..c18e75f7 --- /dev/null +++ b/examples/qwik/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/examples/qwik/public/robots.txt b/examples/qwik/public/robots.txt new file mode 100644 index 00000000..e69de29b diff --git a/examples/qwik/src/components/header/header.css b/examples/qwik/src/components/header/header.css new file mode 100644 index 00000000..550462ec --- /dev/null +++ b/examples/qwik/src/components/header/header.css @@ -0,0 +1,34 @@ +header { + display: flex; + background: white; + border-bottom: 10px solid var(--qwik-dark-purple); +} + +header .logo a { + display: inline-block; + padding: 10px 10px 7px 20px; +} + +header ul { + margin: 0; + padding: 3px 10px 0 0; + list-style: none; + flex: 1; + text-align: right; +} + +header li { + display: inline-block; + margin: 0; + padding: 0; +} + +header li a { + display: inline-block; + padding: 15px 10px; + text-decoration: none; +} + +header li a:hover { + text-decoration: underline; +} diff --git a/examples/qwik/src/components/header/header.tsx b/examples/qwik/src/components/header/header.tsx new file mode 100644 index 00000000..d586a03f --- /dev/null +++ b/examples/qwik/src/components/header/header.tsx @@ -0,0 +1,34 @@ +import { component$, useStylesScoped$ } from '@builder.io/qwik'; +import { QwikLogo } from '../icons/qwik'; +import styles from './header.css?inline'; + +export default component$(() => { + useStylesScoped$(styles); + + return ( +
+ + +
+ ); +}); diff --git a/examples/qwik/src/components/icons/qwik.tsx b/examples/qwik/src/components/icons/qwik.tsx new file mode 100644 index 00000000..07127e31 --- /dev/null +++ b/examples/qwik/src/components/icons/qwik.tsx @@ -0,0 +1,32 @@ +export const QwikLogo = () => ( + + + + + + + + + +); diff --git a/examples/qwik/src/components/router-head/router-head.tsx b/examples/qwik/src/components/router-head/router-head.tsx new file mode 100644 index 00000000..9e707034 --- /dev/null +++ b/examples/qwik/src/components/router-head/router-head.tsx @@ -0,0 +1,32 @@ +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) => ( +