feat(qwik): add Qwik support

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
 

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

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',
+  },
+};

examples/qwik/.gitignore

@@ -0,0 +1,41 @@
+# 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
+
+# Netlify
+.netlify

examples/qwik/.node-version

@@ -0,0 +1 @@
+16

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

examples/qwik/README.md

@@ -0,0 +1,124 @@
+# 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`
+```
+
+## Netlify
+
+This starter site is configured to deploy to [Netlify Edge Functions](https://docs.netlify.com/edge-functions/overview/), which means it will be rendered at an edge location near to your users.
+
+### Local development
+
+The [Netlify CLI](https://docs.netlify.com/cli/get-started/) can be used to preview a production build locally. To do so: First build your site, then to start a local server, run:
+
+1. Install Netlify CLI globally `npm i -g netlify-cli`.
+2. Build your site with both ssr and static `yarn build`.
+3. Start a local server with `yarn serve`.
+   In this project, `yarn serve` uses the `netlify dev` command to spin up a server that can handle Netlify's Edge Functions locally.
+4. Visit [http://localhost:8888/](http://localhost:8888/) to check out your site.
+
+### Edge Functions Declarations
+
+[Netlify Edge Functions declarations](https://docs.netlify.com/edge-functions/declarations/)
+can be configured to run on specific URL patterns. Each edge function declaration associates
+one site path pattern with one function to execute on requests that match the path. A single request can execute a chain of edge functions from a series of declarations. A single edge function can be associated with multiple paths across various declarations.
+
+This is useful to determine if a page response should be Server-Side Rendered (SSR) or
+if the response should use a static-site generated (SSG) `index.html` file instead.
+
+By default, the Netlify Edge adaptor will generate a `.netlify/edge-middleware/manifest.json` file, which is used by the Netlify deployment to determine which paths should, and should not, use edge functions.
+
+To override the generated manifest, you can [add a declaration](https://docs.netlify.com/edge-functions/declarations/#add-a-declaration) to the `netlify.toml` using the `[[edge_functions]]` config. For example:
+
+```toml
+[[edge_functions]]
+  path = "/admin"
+  function = "auth"
+```
+
+### Deployments
+
+You can [deploy your site to Netlify](https://docs.netlify.com/site-deploys/create-deploys/) either via a Git provider integration or through the Netlify CLI. This starter site includes a `netlify.toml` file to configure your build for deployment.
+
+#### Deploying via Git
+
+Once your site has been pushed to your Git provider, you can either link it [in the Netlify UI](https://app.netlify.com/start) or use the CLI. To link your site to a Git provider from the Netlify CLI, run the command:
+
+```shell
+netlify link
+```
+
+This sets up [continuous deployment](https://docs.netlify.com/site-deploys/create-deploys/#deploy-with-git) for your site's repo. Whenever you push new commits to your repo, Netlify starts the build process..
+
+#### Deploying manually via the CLI
+
+If you wish to deploy from the CLI rather than using Git, you can use the command:
+
+```shell
+netlify deploy --build
+```
+
+You must use the `--build` flag whenever you deploy. This ensures that the Edge Functions that this starter site relies on are generated and available when you deploy your site.
+
+Add `--prod` flag to deploy to production.

examples/qwik/adapters/netlify-edge/vite.config.ts

@@ -0,0 +1,16 @@
+import { netifyEdgeAdapter } from '@builder.io/qwik-city/adapters/netlify-edge/vite';
+import { extendConfig } from '@builder.io/qwik-city/vite';
+import baseConfig from '../../vite.config';
+
+export default extendConfig(baseConfig, () => {
+  return {
+    build: {
+      ssr: true,
+      rollupOptions: {
+        input: ['src/entry.netlify-edge.tsx', '@qwik-city-plan'],
+      },
+      outDir: '.netlify/edge-functions/entry.netlify-edge',
+    },
+    plugins: [netifyEdgeAdapter()],
+  };
+});

examples/qwik/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "qwik-demo",
+  "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.server": "vite build -c adapters/netlify-edge/vite.config.ts",
+    "build.types": "tsc --incremental --noEmit",
+    "deploy": "netlify deploy --build",
+    "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",
+    "@netlify/edge-functions": "^2.0.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",
+    "netlify-cli": "^12.0.11",
+    "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:^"
+  }
+}

examples/qwik/public/_headers

@@ -0,0 +1,2 @@
+/build/*
+  Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

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."
+}