chore(examples): add Qwik example app (#11253)

* feat: scaffold app

* feat: add Qwik example

* feat: add qwik-auth-example in sync.yml

* fix: improve Qwik example

* chore: linter 🧽

.github/sync.yml

@@ -39,3 +39,10 @@ nextauthjs/next-auth-pages-example:
     deleteOrphaned: true
   - .github/FUNDING.yml
   - LICENSE
+
+nextauthjs/qwik-auth-example:
+  - source: apps/examples/qwik
+    dest: .
+    deleteOrphaned: true
+  - .github/FUNDING.yml
+  - LICENSE

apps/examples/qwik/.env.example

@@ -0,0 +1,4 @@
+AUTH_SECRET=
+
+AUTH_GITHUB_ID=
+AUTH_GITHUB_SECRET=

apps/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

apps/examples/qwik/.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",
+  },
+};

apps/examples/qwik/.gitignore

@@ -0,0 +1,41 @@
+# Build
+/dist
+/lib
+/lib-types
+/server
+
+# Development
+node_modules
+*.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

apps/examples/qwik/.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

apps/examples/qwik/.prettierrc.js

@@ -0,0 +1,3 @@
+export default {
+  plugins: ["prettier-plugin-tailwindcss"],
+};

apps/examples/qwik/.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": ["<node_internals>/**"],
+      "cwd": "${workspaceFolder}",
+      "program": "${workspaceFolder}/node_modules/vite/bin/vite.js",
+      "args": ["--mode", "ssr", "--force"]
+    }
+  ]
+}

apps/examples/qwik/.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",
+      "});"
+    ]
+  }
+}

apps/examples/qwik/.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</$2>",
+      "});"
+    ]
+  },
+  "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",
+      "    </${3}>",
+      "  );",
+      "});"
+    ]
+  },
+  "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",
+      "});",
+      ""
+    ]
+  }
+}

apps/examples/qwik/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`
+```