diff --git a/.all-contributorsrc b/.all-contributorsrc index dc66f850f8c..0d8412688fd 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -3,9 +3,7 @@ "projectOwner": "BuilderIO", "repoType": "github", "repoHost": "https://github.com", - "files": [ - "README.md" - ], + "files": ["README.md"], "imageSize": 100, "commit": true, "commitConvention": "angular", diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index 95a49bdb196..c2b1f394f76 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -1,12 +1,15 @@ -FROM cimg/rust:1.65.0-node +FROM cimg/rust:1.72.1-node -RUN rustup toolchain install nightly-2022-09-23; \ - rustup default nightly-2022-09-23; \ - rustup --version; \ +RUN rustup --version; \ cargo --version; \ - rustc --version; \ - rustup update; \ + rustc --version; + +RUN rustup update; \ rustup target add wasm32-unknown-unknown; \ - cargo install cargo-insta wasm-pack; \ + cargo install cargo-insta; \ + cargo install wasm-pack; \ rustup component add clippy; \ corepack enable --install-directory ~/bin + +RUN mkdir /home/circleci/store; \ + pnpm config set store-dir /home/circleci/store \ No newline at end of file diff --git a/.gitignore b/.gitignore index 9407efb0783..190d4c16135 100644 --- a/.gitignore +++ b/.gitignore @@ -13,7 +13,10 @@ temp # Application qwik-app/ -**/server/ +/server/ +/starters/**/server/ +/packages/*/server/ +/packages/*/src/styled-system/ todo-express/ target !/packages/docs/src/routes/demo/events/target @@ -31,9 +34,9 @@ lib tsdoc-metadata.json # IDE and local environment -.vscode/settings.json .idea .eslintcache +test-results # Package Managers .yarn/* diff --git a/.prettierrc.json b/.prettierrc.json index 1278ba491dd..6369edaa21a 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,4 +1,7 @@ { + "plugins": ["./node_modules/prettier-plugin-jsdoc/dist/index.js"], + "jsdocPreferCodeFences": true, + "tsdoc": true, "trailingComma": "es5", "tabWidth": 2, "semi": true, diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 9446f39846a..98553e1ae01 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -8,7 +8,8 @@ "ms-azuretools.vscode-docker", "manucorporat.vermoji", "vadimcn.vscode-lldb", - "streetsidesoftware.code-spell-checker" + "streetsidesoftware.code-spell-checker", + "ZixuanChen.vitest-explorer" ], "unwantedRecommendations": [] } diff --git a/.vscode/launch.json b/.vscode/launch.json index 32a01d786ec..e3412499d16 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -22,21 +22,6 @@ "program": "${workspaceFolder}/node_modules/jest/bin/jest.js", "cwd": "${workspaceFolder}", "args": ["--runInBand", "--watchAll=false"] - }, - { - "name": "uvu Current File", - "type": "node", - "request": "launch", - "skipFiles": ["/**"], - "program": "${workspaceFolder}/node_modules/tsm/bin.js", - "args": [ - "${workspaceFolder}/node_modules/uvu/bin.js", - "${fileDirname}", - "${fileBasename}", - "--tsmconfig", - "${workspaceFolder}/tsm.cjs" - ], - "console": "integratedTerminal" } ] } diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000000..6abad843d2c --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,10 @@ +{ + "vitest.include": ["**/*.{test,spec,unit}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], + "vitest.exclude": [ + "**/node_modules/**", + "**/dist/**", + "**/dist-dev/**", + "**/cypress/**", + "**/.{idea,git,cache,output,temp}/**" + ] +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 50d470941c4..0c82d5fb516 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -72,7 +72,7 @@ You need to have these tools up and running in your local machine: If you would like to make use of the devlopment container solution, but don't use VSCode or Dev Containers, you still can do so, by following steps: -- Build development container locally: `cd .devcontainers; docker build -t qwik-container .` +- Build development container locally: `cd .devcontainer; docker build -t qwik-container .` - Run development container from Qwik project root, binding the directory to container: `cd ..; docker run --rm -d --name qwik-container -p 3300:3300 -p 9229:9299 -v $PWD:/home/circleci/project -t qwik-container` Docker command does: @@ -210,28 +210,17 @@ To use your build in your project, follow these steps: yarn link @builder.io/qwik @builder.io/qwik-city ``` -If you can't use package linking (npm link) just copy the contents of `package/qwik/dist` into your projects' `node_modules/@builder.io/qwik` folder. +If you can't use package linking (npm link) just copy the contents of `packages/qwik/dist` into your projects' `node_modules/@builder.io/qwik` folder, and/or the contents of `packages/qwik-city/lib` into your projects' `node_modules/@builder.io/qwik-city` folder. ### Test against the docs site: -1. Go to `packages/docs/package.json` and update: - - ```diff - - -- "@builder.io/qwik": "0.17.4", - -- "@builder.io/qwik-city": "0.1.0-beta13", - - ++ "@builder.io/qwik": "workspace:*", - ++ "@builder.io/qwik-city": "workspace:*", - ``` - -2. At the root of the Qwik repo folder run: +1. At the root of the Qwik repo folder run: ```shell pnpm install ``` -3. Run the docs site: +2. Run the docs site: ```shell cd packages/docs && pnpm start @@ -245,20 +234,12 @@ pnpm serve ### Unit Tests Only -Unit tests use [uvu](https://github.com/lukeed/uvu) +Unit tests use [vitest](https://vitest.dev) ```shell pnpm test.unit ``` -To keep _uvu_ open with the watch mode, run: - -```shell -pnpm test.watch -``` - -> Note that the `test.watch` command isn't necessary if you're running the `pnpm start` command, since `start` will also concurrently run the _uvu_ watch process. - ### E2E Tests Only E2E tests use [Playwright](https://playwright.dev/). diff --git a/package.json b/package.json index 15211014789..218501431c3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "qwik-monorepo", - "version": "1.2.12", + "version": "1.2.13", "config": { "commitizen": { "path": "./node_modules/cz-conventional-changelog" @@ -27,65 +27,65 @@ "esbuild-plugin-raw": "^0.1.7" }, "devDependencies": { - "@builder.io/partytown": "^0.8.0", + "@builder.io/partytown": "^0.8.1", "@clack/prompts": "^0.7.0", - "@microsoft/api-documenter": "^7.22.30", - "@microsoft/api-extractor": "7.36.3", - "@napi-rs/cli": "2.12.1", + "@microsoft/api-documenter": "^7.23.9", + "@microsoft/api-extractor": "^7.38.0", + "@napi-rs/cli": "^2.16.3", "@napi-rs/triples": "1.1.0", "@node-rs/helper": "1.3.3", "@octokit/action": "3.18.1", - "@playwright/test": "1.36.2", - "@types/brotli": "1.3.1", - "@types/cross-spawn": "6.0.2", - "@types/eslint": "8.44.1", - "@types/express": "4.17.17", - "@types/mri": "1.1.1", - "@types/node": "^20.4.5", + "@playwright/test": "^1.38.1", + "@types/brotli": "^1.3.2", + "@types/cross-spawn": "^6.0.3", + "@types/eslint": "^8.44.4", + "@types/express": "^4.17.19", + "@types/mri": "^1.1.2", + "@types/node": "^20.8.4", "@types/path-browserify": "1.0.0", - "@types/prettier": "2.7.3", - "@types/prompts": "2.4.4", - "@types/semver": "7.5.0", + "@types/prompts": "^2.4.6", + "@types/semver": "^7.5.3", "@types/which-pm-runs": "1.0.0", - "@typescript-eslint/eslint-plugin": "6.2.0", - "@typescript-eslint/parser": "6.2.0", - "@typescript-eslint/rule-tester": "^6.2.0", - "@typescript-eslint/utils": "6.2.0", + "@typescript-eslint/eslint-plugin": "^6.7.5", + "@typescript-eslint/parser": "^6.7.5", + "@typescript-eslint/rule-tester": "^6.7.5", + "@typescript-eslint/utils": "^6.7.5", "all-contributors-cli": "6.26.1", "brotli": "1.3.3", "commitizen": "4.3.0", - "concurrently": "8.2.0", + "concurrently": "^8.2.1", "create-qwik": "workspace:*", "cross-spawn": "7.0.3", "cz-conventional-changelog": "3.3.0", - "esbuild": "0.18.17", - "eslint": "8.45.0", + "esbuild": "^0.19.4", + "eslint": "^8.51.0", "eslint-plugin-no-only-tests": "3.1.0", - "eslint-plugin-qwik": "1.2.6", + "eslint-plugin-qwik": "^1.2.13", "execa": "7.2.0", "express": "4.18.2", "install": "^0.13.0", - "monaco-editor": "^0.39.0", + "monaco-editor": "^0.44.0", "mri": "1.2.0", "ora": "6.3.1", "path-browserify": "1.0.1", - "prettier": "3.0.0", + "prettier": "^3.0.3", + "prettier-plugin-jsdoc": "^1.1.1", "pretty-quick": "^3.1.3", "prompts": "2.4.2", "rollup": "3.26.3", "semver": "7.5.4", "snoop": "^1.0.4", "syncpack": "^10.7.3", - "terser": "5.19.2", - "tsm": "2.2.2", - "typescript": "5.1.6", - "undici": "5.22.1", - "uvu": "0.5.6", - "vite": "4.4.7", - "vite-tsconfig-paths": "4.2.0", + "terser": "^5.21.0", + "tsm": "^2.3.0", + "typescript": "^5.2.2", + "undici": "^5.26.0", + "vite": "^4.4.11", + "vite-tsconfig-paths": "^4.2.1", + "vitest": "0.34.6", "watchlist": "0.3.1", "which-pm-runs": "1.1.0", - "zod": "^3.21.4" + "zod": "^3.22.4" }, "engines": { "node": ">=16.8.0 <18.0.0 || >=18.11", @@ -93,7 +93,7 @@ "yarn": "please-use-pnpm", "pnpm": ">=8.6.12" }, - "packageManager": "pnpm@8.6.12", + "packageManager": "pnpm@8.9.0", "pnpm": { "overrides": { "vfile": "6.0.1" @@ -120,7 +120,7 @@ "cli.validate": "tsm scripts/validate-cli.ts", "commit": "git-cz", "deps": "pnpm upgrade -i -r --latest", - "docs.sync": "tsm scripts/docs_sync/index.ts", + "docs.sync": "tsm scripts/docs_sync/index.ts && pnpm fmt", "eslint.update": "tsm scripts/eslint-docs.ts", "fmt": "pnpm prettier.fix && pnpm syncpack format", "fmt.staged": "pretty-quick --staged", @@ -147,13 +147,14 @@ "test.e2e.firefox": "playwright test starters --browser=firefox --config starters/playwright.config.ts", "test.e2e.webkit": "playwright test starters --browser=webkit --config starters/playwright.config.ts", "test.rust": "make test", - "test.unit": "tsm node_modules/uvu/bin.js packages unit.ts --tsmconfig tsm.cjs", - "test.unit.debug": "tsm --inspect-brk node_modules/uvu/bin.js packages unit.ts --tsmconfig tsm.cjs", + "test.unit": "vitest packages", + "test.unit.debug": "vitest --inspect-brk packages", "test.vite": "playwright test starters/e2e/qwikcity --browser=chromium --config starters/playwright.config.ts", "test.watch": "watchlist packages unit.ts -- pnpm test.unit", "tsc.check": "tsc --noEmit", "tsc.trace": "tsc -p tsconfig.json --traceResolution > tsc.log", - "tsc.watch": "tsc --noEmit --watch --preserveWatchOutput" + "tsc.watch": "tsc --noEmit --watch --preserveWatchOutput", + "update.qwik.builds": "tsm scripts/update-qwik-builds.ts packages/docs && tsm scripts/update-qwik-builds.ts packages/insights; pnpm install" }, "type": "module" } diff --git a/packages/create-qwik/package.json b/packages/create-qwik/package.json index ebd7161ae7f..1c2edc7c3e9 100644 --- a/packages/create-qwik/package.json +++ b/packages/create-qwik/package.json @@ -1,13 +1,13 @@ { "name": "create-qwik", "description": "Interactive CLI for create Qwik projects and adding features.", - "version": "1.2.12", + "version": "1.2.13", "author": "Builder.io Team", "bin": "./create-qwik.cjs", "bugs": "https://github.com/BuilderIO/qwik/issues", "devDependencies": { "@clack/prompts": "^0.7.0", - "@types/yargs": "17.0.24", + "@types/yargs": "^17.0.28", "kleur": "4.1.5", "yargs": "17.7.2" }, diff --git a/packages/create-qwik/src/run-create-cli.ts b/packages/create-qwik/src/run-create-cli.ts index adadd31c67e..05c5cf33534 100644 --- a/packages/create-qwik/src/run-create-cli.ts +++ b/packages/create-qwik/src/run-create-cli.ts @@ -52,9 +52,7 @@ function parseArgs(args: string[], templates: string[]) { return parsedArgs; } -/** - * @param args pass here process.argv.slice(2) - */ +/** @param args Pass here process.argv.slice(2) */ export async function runCreateCli(...args: string[]): Promise { const pkgManager = getPackageManager(); const templateManager = await makeTemplateManager('app'); @@ -113,8 +111,8 @@ function isStackBlitz() { try { // /home/projects/abc123 return process.cwd().startsWith('/home/projects/'); - } catch (e) { - /**/ + } catch { + // ignore } return false; } diff --git a/packages/docs/package.json b/packages/docs/package.json index a6c3b33e0c0..6ae0d0eb140 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -7,48 +7,48 @@ "devDependencies": { "@algolia/autocomplete-core": "1.7.4", "@algolia/client-search": "4.14.3", - "@builder.io/partytown": "^0.8.0", - "@builder.io/qwik": "github:BuilderIo/qwik-build#main", - "@builder.io/qwik-city": "github:BuilderIo/qwik-city-build#main", - "@builder.io/qwik-labs": "github:BuilderIo/qwik-labs-build#a487845dd5039e3e178f69755f603cbc2edef2c2", + "@builder.io/partytown": "^0.8.1", + "@builder.io/qwik": "github:BuilderIo/qwik-build#d3722d228e541225f75068160287811ee900a29c", + "@builder.io/qwik-city": "github:BuilderIo/qwik-city-build#86e0034604ef6ecb2e50e7b3c2c2b8f3a36b0118", + "@builder.io/qwik-labs": "github:BuilderIo/qwik-labs-build#f93ef76256c988d57acd24cc5d59ebf2e39c3d02", "@builder.io/qwik-react": "0.5.0", - "@builder.io/sdk-qwik": "^0.4.5", - "@docsearch/css": "3.3.4", + "@builder.io/sdk-qwik": "^0.6.2", + "@docsearch/css": "^3.5.2", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@modular-forms/qwik": "^0.12.0", - "@mui/material": "^5.13.0", - "@mui/x-data-grid": "^6.4.0", - "@supabase/supabase-js": "^2.33.1", - "@types/prismjs": "^1.26.0", - "@types/react": "18.2.17", - "@types/react-dom": "18.2.7", - "@unpic/core": "^0.0.28", - "@unpic/qwik": "^0.0.24", + "@modular-forms/qwik": "^0.21.0", + "@mui/material": "^5.14.13", + "@mui/x-data-grid": "^6.16.1", + "@supabase/supabase-js": "2.33.1", + "@types/prismjs": "^1.26.1", + "@types/react": "^18.2.28", + "@types/react-dom": "^18.2.13", + "@unpic/core": "^0.0.31", + "@unpic/qwik": "^0.0.27", "algoliasearch": "4.16.0", - "autoprefixer": "^10.4.14", - "fflate": "0.8.0", + "autoprefixer": "^10.4.16", + "fflate": "^0.8.1", "gray-matter": "4.0.3", "openai": "^3.3.0", - "postcss": "8.4.27", - "prettier": "3.0.0", + "postcss": "^8.4.31", + "prettier": "^3.0.3", "prism-themes": "1.9.0", "prismjs": "1.29.0", "puppeteer": "^20.9.0", - "qwik-image": "^0.0.7", + "qwik-image": "^0.0.8", "react": "18.2.0", "react-dom": "18.2.0", - "rehype-pretty-code": "0.9.8", - "shiki": "^0.14.3", + "rehype-pretty-code": "^0.10.1", + "shiki": "^0.14.5", "snarkdown": "^2.0.0", "tailwindcss": "3.3.3", - "tsm": "2.2.2", - "typescript": "5.1.6", - "undici": "5.22.1", - "uvu": "0.5.6", - "vite": "4.4.7", - "vite-plugin-inspect": "^0.7.33", - "wrangler": "^3.3.0" + "tsm": "^2.3.0", + "typescript": "^5.2.2", + "undici": "^5.26.0", + "valibot": "^0.17.1", + "vite": "^4.4.11", + "vite-plugin-inspect": "^0.7.40", + "wrangler": "^3.11.0" }, "engines": { "node": ">=18.11", diff --git a/packages/docs/public/ecosystem/qwik-morocco.svg b/packages/docs/public/ecosystem/qwik-morocco.svg new file mode 100644 index 00000000000..1c40d0df257 --- /dev/null +++ b/packages/docs/public/ecosystem/qwik-morocco.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/docs/public/showcases/builtwith_appwrite_io_.webp b/packages/docs/public/showcases/builtwith_appwrite_io_.webp new file mode 100644 index 00000000000..26c3c44350e Binary files /dev/null and b/packages/docs/public/showcases/builtwith_appwrite_io_.webp differ diff --git a/packages/docs/public/showcases/frostytools_com.webp b/packages/docs/public/showcases/frostytools_com.webp new file mode 100644 index 00000000000..51a24e7971f Binary files /dev/null and b/packages/docs/public/showcases/frostytools_com.webp differ diff --git a/packages/docs/public/showcases/getpolaris_ai_.webp b/packages/docs/public/showcases/getpolaris_ai_.webp new file mode 100644 index 00000000000..ef1fd5193ee Binary files /dev/null and b/packages/docs/public/showcases/getpolaris_ai_.webp differ diff --git a/packages/docs/public/showcases/itbusinesshub_com_.webp b/packages/docs/public/showcases/itbusinesshub_com_.webp new file mode 100644 index 00000000000..853423f0d49 Binary files /dev/null and b/packages/docs/public/showcases/itbusinesshub_com_.webp differ diff --git a/packages/docs/public/showcases/leonerd_blog.webp b/packages/docs/public/showcases/leonerd_blog.webp new file mode 100644 index 00000000000..d29ce766e3c Binary files /dev/null and b/packages/docs/public/showcases/leonerd_blog.webp differ diff --git a/packages/docs/public/showcases/pay4me_app.webp b/packages/docs/public/showcases/pay4me_app.webp new file mode 100644 index 00000000000..0c672c46863 Binary files /dev/null and b/packages/docs/public/showcases/pay4me_app.webp differ diff --git a/packages/docs/public/showcases/qwik-meet_onrender_com_.webp b/packages/docs/public/showcases/qwik-meet_onrender_com_.webp new file mode 100644 index 00000000000..b0043b9a957 Binary files /dev/null and b/packages/docs/public/showcases/qwik-meet_onrender_com_.webp differ diff --git a/packages/docs/public/showcases/qwik-osm-poc_netlify_app_.webp b/packages/docs/public/showcases/qwik-osm-poc_netlify_app_.webp new file mode 100644 index 00000000000..898ed3d4a53 Binary files /dev/null and b/packages/docs/public/showcases/qwik-osm-poc_netlify_app_.webp differ diff --git a/packages/docs/public/showcases/radixstream_com_.webp b/packages/docs/public/showcases/radixstream_com_.webp new file mode 100644 index 00000000000..9b3b92822d0 Binary files /dev/null and b/packages/docs/public/showcases/radixstream_com_.webp differ diff --git a/packages/docs/public/showcases/seifen_vercel_app_.webp b/packages/docs/public/showcases/seifen_vercel_app_.webp new file mode 100644 index 00000000000..e54e4cf18ea Binary files /dev/null and b/packages/docs/public/showcases/seifen_vercel_app_.webp differ diff --git a/packages/docs/public/showcases/simplymc_art_.webp b/packages/docs/public/showcases/simplymc_art_.webp new file mode 100644 index 00000000000..076a667c9e8 Binary files /dev/null and b/packages/docs/public/showcases/simplymc_art_.webp differ diff --git a/packages/docs/public/showcases/ss-link_netlify_app_.webp b/packages/docs/public/showcases/ss-link_netlify_app_.webp new file mode 100644 index 00000000000..27c4928320e Binary files /dev/null and b/packages/docs/public/showcases/ss-link_netlify_app_.webp differ diff --git a/packages/docs/public/showcases/www_anirbandas_in_.webp b/packages/docs/public/showcases/www_anirbandas_in_.webp new file mode 100644 index 00000000000..f200712f341 Binary files /dev/null and b/packages/docs/public/showcases/www_anirbandas_in_.webp differ diff --git a/packages/docs/public/showcases/www_dimension_dev.webp b/packages/docs/public/showcases/www_dimension_dev.webp new file mode 100644 index 00000000000..45944f74124 Binary files /dev/null and b/packages/docs/public/showcases/www_dimension_dev.webp differ diff --git a/packages/docs/public/showcases/www_expobeds_com_.webp b/packages/docs/public/showcases/www_expobeds_com_.webp new file mode 100644 index 00000000000..5ebaa7fdc42 Binary files /dev/null and b/packages/docs/public/showcases/www_expobeds_com_.webp differ diff --git a/packages/docs/public/showcases/www_hexa_center_.webp b/packages/docs/public/showcases/www_hexa_center_.webp new file mode 100644 index 00000000000..4c10ac834e4 Binary files /dev/null and b/packages/docs/public/showcases/www_hexa_center_.webp differ diff --git a/packages/docs/scripts/pages.json b/packages/docs/scripts/pages.json index 2181d656acc..c3287981d8c 100644 --- a/packages/docs/scripts/pages.json +++ b/packages/docs/scripts/pages.json @@ -1,4 +1,12 @@ [ + { + "href": "https://quotemingle.com/", + "tags": "site" + }, + { + "href": "https://frostytools.com", + "tags": "saas" + }, { "href": "https://www.dimension.dev", "tags": "saas" @@ -12,9 +20,8 @@ "tags": "saas" }, { - "href": "https://www.expobeds.com/", - "size": "large", - "tags": "conpany" + "href": "https://reflect.app/", + "tags": "saas" }, { "href": "https://jose-aguilar.vercel.app/", @@ -25,12 +32,9 @@ "tags": "portfolio" }, { - "href": "https://reflect.app/", - "tags": "saas" - }, - { - "href": "https://realmof.tech/", - "tags": "portfolio" + "href": "https://qwik-city-movies-wm.netlify.app/", + "size": "large", + "tags": "app" }, { "href": "https://www.hexa.center/", @@ -85,9 +89,9 @@ "tags": "portfolio" }, { - "href": "https://qwik-city-movies-wm.netlify.app/", + "href": "https://www.expobeds.com/", "size": "large", - "tags": "app" + "tags": "company" }, { "href": "https://jbnado.dev/", @@ -169,7 +173,7 @@ }, { "href": "https://pay4me.app", - "tags": "sass" + "tags": "saas" }, { "href": "https://qwik-osm-poc.netlify.app/", @@ -202,6 +206,6 @@ }, { "href": "https://getpolaris.ai/", - "tags": "sass" + "tags": "saas" } ] diff --git a/packages/docs/src/entry.dev.tsx b/packages/docs/src/entry.dev.tsx index df1b558d74a..70bf4d77393 100644 --- a/packages/docs/src/entry.dev.tsx +++ b/packages/docs/src/entry.dev.tsx @@ -3,6 +3,7 @@ import Root from './root'; /** * Development entry point using only client-side modules: + * * - Do not use this mode in production! * - No SSR * - No portion of the application is pre-rendered on the server. diff --git a/packages/docs/src/entry.preview.tsx b/packages/docs/src/entry.preview.tsx index 01bf97cca50..7c4a0028bf2 100644 --- a/packages/docs/src/entry.preview.tsx +++ b/packages/docs/src/entry.preview.tsx @@ -2,7 +2,5 @@ import { createQwikCity } from '@builder.io/qwik-city/middleware/node'; import qwikCityPlan from '@qwik-city-plan'; import render from './entry.ssr'; -/** - * The default export is the QwikCity adapter used by Vite preview. - */ +/** The default export is the QwikCity adapter used by Vite preview. */ export default createQwikCity({ render, qwikCityPlan }); diff --git a/packages/docs/src/repl/repl-share-url.unit.ts b/packages/docs/src/repl/repl-share-url.unit.ts index 8e7ef7525dc..1f77a558b70 100644 --- a/packages/docs/src/repl/repl-share-url.unit.ts +++ b/packages/docs/src/repl/repl-share-url.unit.ts @@ -1,5 +1,4 @@ -import { test } from 'uvu'; -import * as assert from 'uvu/assert'; +import { assert, test } from 'vitest'; import { filesToStr, strToFiles, @@ -32,19 +31,22 @@ test('filesToStr', () => { ); }); test('round trip str', () => { - assert.equal(strToFiles(filesToStr(data.files)), data.files); + assert.deepEqual(strToFiles(filesToStr(data.files)), data.files); }); test('compressFiles', () => { assert.equal(compressFiles(data.files), 'M6tJy8/XyyoGeqYGub5UAgoraVrXmNUkJRZhkwcKA+UB'); }); test('parseCompressedFiles', () => { - assert.equal(parseCompressedFiles('M6tJy8/XyyoGeqYGub5UAgoraVrXmNUkJRZhkwcKA+UB'), data.files); + assert.deepEqual( + parseCompressedFiles('M6tJy8/XyyoGeqYGub5UAgoraVrXmNUkJRZhkwcKA+UB'), + data.files + ); }); test('round trip compressed', () => { - assert.equal(parseCompressedFiles(compressFiles(data.files)), data.files); + assert.deepEqual(parseCompressedFiles(compressFiles(data.files)), data.files); }); test('createPlaygroundShareUrl', () => { - assert.equal( + assert.deepEqual( createPlaygroundShareUrl(data), '/playground/#v=1.2.3&f=M6tJy8%2FXyyoGeqYGub5UAgoraVrXmNUkJRZhkwcKA%2BUB' ); @@ -67,5 +69,3 @@ test('dictionary is unchanged', () => { "0||1448|
props: class return ( story component$( store string state export const span type href={ page strong count useSignal< useStore< qwik import { } from searchInput console.log( searchResults builder useTask$( stories style={ news export default data track onClick$= new nav map link debounced controller user useStyles$( useStylesScoped$( url title timeoutId time_ago second response Date.now() minute main item interface hour disabled aria any State update transform the target suggestion setTimeout selectedValue rotate render people number list label https:// header deg debouncedGetPeople debounce component comments_count comments clock background await new Promise args SuggestionsListComponent IStory IState IComment GrandChild Clock Child AutoComplete 360 yellow with view useVisibleTask$( true tmrId timer then swapi styles signal section search results resolve rel prev points parsedResponse null noreferrer name more length json job items isServer index github getPeople function fetch example domain dev delay css container com click clearTimeout async api _blank Star Wars API This The StoryPreview Stories ReturnType Qwik App Page Nav HackerNewsCSS AbortController server$( routeAction$( routeLoader$( useContent( useDocumentHead( useLocation( useNavigate( validator$( zod$( noSerialize( useComputed$( useOnDocument( useOnWindow( useResource$( useContext( useContextProvider( createContextId<|8|/app.tsx|114|import { component$ } from '@builder.io/qwik';\n\nexport default component$(() => {\n return

Hello Qwik

;\n});\n|17|/entry.server.tsx|201|import { renderToString, type RenderOptions } from '@builder.io/qwik/server';\nimport { Root } from './root';\n\nexport default function (opts: RenderOptions) {\n return renderToString(, opts);\n}\n|9|/root.tsx|192|import App from './app';\n\nexport const Root = () => {\n return (\n <>\n \n Hello Qwik\n \n \n \n \n \n );\n};\n" ); }); - -test.run(); diff --git a/packages/docs/src/repl/worker/repl-server.ts b/packages/docs/src/repl/worker/repl-server.ts index 523ccdd1b59..fe84b10eeba 100644 --- a/packages/docs/src/repl/worker/repl-server.ts +++ b/packages/docs/src/repl/worker/repl-server.ts @@ -1,8 +1,8 @@ /** - * Source for url: "/repl/~repl-server.js" - * Created from the route: "src/routes/repl/~repl-server.js/entry.ts" - * Script executed from url: "/repl/~repl-server-host.html" - * Public static html source file: "public/repl/~repl-server-host.html" + * - Source for url: "/repl/~repl-server.js" + * - Created from the route: "src/routes/repl/~repl-server.js/entry.ts" + * - Script executed from url: "/repl/~repl-server-host.html" + * - Public static html source file: "public/repl/~repl-server-host.html" */ /* eslint-disable no-console */ diff --git a/packages/docs/src/routes/(ecosystem)/media/index.tsx b/packages/docs/src/routes/(ecosystem)/media/index.tsx index f2cf23696fc..3011d2198b3 100644 --- a/packages/docs/src/routes/(ecosystem)/media/index.tsx +++ b/packages/docs/src/routes/(ecosystem)/media/index.tsx @@ -3,7 +3,7 @@ import { component$, useStyles$ } from '@builder.io/qwik'; import { type DocumentHead } from '@builder.io/qwik-city'; import styles from './media.css?inline'; -/*************************************************************/ +/***/ /* This file is used to generate the ecosystem and media pages. /* Please find the appropriate section in the MEDIA variable /* to add your content. @@ -11,7 +11,7 @@ import styles from './media.css?inline'; /*************************************************************/ export const MEDIA = mediaObj({ - /*****************************************/ + /***/ /* Courses /*****************************************/ courses: [ @@ -79,7 +79,7 @@ export const MEDIA = mediaObj({ }), ], - /*****************************************/ + /***/ /* Videos /*****************************************/ videos: [ @@ -182,7 +182,7 @@ export const MEDIA = mediaObj({ youtube('Resumability | Explained Briefly', 'vQ365FjT-yI', { author: 'Neon Pie' }), ], - /*****************************************/ + /***/ /* Podcasts /*****************************************/ podcasts: [ @@ -246,7 +246,7 @@ export const MEDIA = mediaObj({ }, ], - /*****************************************/ + /***/ /* Presentations /*****************************************/ presentations: [ @@ -281,7 +281,7 @@ export const MEDIA = mediaObj({ youtube('Qwik Core Developers Training', 'Mi7udzhcCDQ', { author: 'Misko Hevery' }), ], - /*****************************************/ + /***/ /* Blogs /*****************************************/ blogs: [ @@ -454,7 +454,7 @@ export const MEDIA = mediaObj({ }, ], - /*****************************************/ + /***/ /* Case Studies /*****************************************/ @@ -479,7 +479,7 @@ export const MEDIA = mediaObj({ }, ], - /*****************************************/ + /***/ /* Resources /*****************************************/ resources: [ @@ -641,9 +641,7 @@ export default component$(() => { ); }); -/** - * A helper for defining YouTube Media Entries - */ +/** A helper for defining YouTube Media Entries */ export function youtube( title: string, id: string, diff --git a/packages/docs/src/routes/(ecosystem)/showcase/generated-pages.json b/packages/docs/src/routes/(ecosystem)/showcase/generated-pages.json index 62c7a600d04..f35c060e06b 100644 --- a/packages/docs/src/routes/(ecosystem)/showcase/generated-pages.json +++ b/packages/docs/src/routes/(ecosystem)/showcase/generated-pages.json @@ -1,4 +1,36 @@ [ + { + "title": "Frosty Tools | Streaming just got a whole lot cooler.", + "imgSrc": "/showcases/frostytools_com.webp", + "perf": { + "score": 1, + "fcpDisplay": "1.0 s", + "fcpScore": 1, + "lcpDisplay": "1.6 s", + "lcpScore": 0.99, + "ttiDisplay": "1.3 s", + "ttiScore": 1, + "ttiTime": 1333 + }, + "href": "https://frostytools.com", + "tags": "saas" + }, + { + "title": "Dimension — The new standard for collaboration.", + "imgSrc": "/showcases/www_dimension_dev.webp", + "perf": { + "score": 0.93, + "fcpDisplay": "1.4 s", + "fcpScore": 0.97, + "lcpDisplay": "3.0 s", + "lcpScore": 0.77, + "ttiDisplay": "2.4 s", + "ttiScore": 0.98, + "ttiTime": 2406 + }, + "href": "https://www.dimension.dev", + "tags": "saas" + }, { "title": "Wope: The New Era Of Rank Tracking", "imgSrc": "/showcases/wope_com_.webp", @@ -13,7 +45,7 @@ "ttiTime": 8514.950938924118 }, "href": "https://wope.com/", - "tags": "sass" + "tags": "saas" }, { "title": "Builder.io - Drag and drop Visual CMS", @@ -31,6 +63,22 @@ "href": "https://www.builder.io/", "tags": "saas" }, + { + "title": "Reflect", + "imgSrc": "/showcases/reflect_app_.webp", + "perf": { + "score": 0.91, + "fcpDisplay": "1.5 s", + "fcpScore": 0.96, + "lcpDisplay": "2.1 s", + "lcpScore": 0.95, + "ttiDisplay": "5.2 s", + "ttiScore": 0.75, + "ttiTime": 5150.5 + }, + "href": "https://reflect.app/", + "tags": "saas" + }, { "title": "Jose Aguilar | Web developer 🚀", "imgSrc": "/showcases/jose-aguilar_vercel_app_.webp", @@ -64,19 +112,36 @@ "tags": "portfolio" }, { - "title": "Reflect", - "imgSrc": "/showcases/reflect_app_.webp", + "title": "Qwik City Movies", + "href": "https://qwik-city-movies-wm.netlify.app/", + "imgSrc": "/showcases/qwik-city-movies-wm_netlify_app_.webp", "perf": { - "score": 0.91, - "fcpDisplay": "1.5 s", - "fcpScore": 0.96, - "lcpDisplay": "2.1 s", - "lcpScore": 0.95, - "ttiDisplay": "5.2 s", - "ttiScore": 0.75, - "ttiTime": 5150.5 + "score": 0.99, + "fcpDisplay": "0.9 s", + "fcpScore": 1, + "lcpDisplay": "2.0 s", + "lcpScore": 0.97, + "ttiDisplay": "0.9 s", + "ttiScore": 1, + "ttiTime": 911.5 }, - "href": "https://reflect.app/", + "size": "large", + "tags": "app" + }, + { + "title": "Hexa Center: Modern EMR (EPD) Solution for your Healthcare Practice", + "imgSrc": "/showcases/www_hexa_center_.webp", + "perf": { + "score": 0.99, + "fcpDisplay": "1.3 s", + "fcpScore": 0.98, + "lcpDisplay": "1.3 s", + "lcpScore": 1, + "ttiDisplay": "1.3 s", + "ttiScore": 1, + "ttiTime": 1282 + }, + "href": "https://www.hexa.center/", "tags": "saas" }, { @@ -223,7 +288,25 @@ "ttiTime": 836 }, "href": "https://www.burgersonfleek.ca/", - "tags": "site" + "tags": "site", + "repo": "https://github.com/saboooor/burgersonfleek" + }, + { + "title": "SimplyMC: A Minecraft Multitool", + "imgSrc": "/showcases/simplymc_art_.webp", + "perf": { + "score": 0.9, + "fcpDisplay": "1.8 s", + "fcpScore": 0.88, + "lcpDisplay": "2.2 s", + "lcpScore": 0.95, + "ttiDisplay": "3.4 s", + "ttiScore": 0.93, + "ttiTime": 3367 + }, + "href": "https://simplymc.art/", + "tags": "site", + "repo": "https://github.com/LuminescentDev/SimplyMC" }, { "title": "Guillermo Peralta Scura", @@ -242,21 +325,21 @@ "tags": "portfolio" }, { - "title": "Qwik City Movies", - "href": "https://qwik-city-movies-wm.netlify.app/", - "imgSrc": "/showcases/qwik-city-movies-wm_netlify_app_.webp", + "title": "ExpoBeds - Your Expo Hotel Booking And Information Directory", + "imgSrc": "/showcases/www_expobeds_com_.webp", "perf": { - "score": 0.99, - "fcpDisplay": "0.9 s", - "fcpScore": 1, - "lcpDisplay": "2.0 s", - "lcpScore": 0.97, - "ttiDisplay": "0.9 s", - "ttiScore": 1, - "ttiTime": 911.5 - }, + "score": 0.91, + "fcpDisplay": "1.6 s", + "fcpScore": 0.94, + "lcpDisplay": "3.4 s", + "lcpScore": 0.67, + "ttiDisplay": "3.9 s", + "ttiScore": 0.89, + "ttiTime": 3859 + }, + "href": "https://www.expobeds.com/", "size": "large", - "tags": "app" + "tags": "company" }, { "title": "Jbnado - João Bernardo", @@ -451,6 +534,22 @@ "href": "https://puzzledbycsharp.com/", "tags": "site" }, + { + "title": "短链", + "imgSrc": "/showcases/ss-link_netlify_app_.webp", + "perf": { + "score": 1, + "fcpDisplay": "1.3 s", + "fcpScore": 0.98, + "lcpDisplay": "1.3 s", + "lcpScore": 1, + "ttiDisplay": "1.3 s", + "ttiScore": 1, + "ttiTime": 1308.5 + }, + "href": "https://ss-link.netlify.app/", + "tags": "app" + }, { "title": "Necati Koçlu - Front-end Developer", "imgSrc": "/showcases/necatikcl_dev_.webp", @@ -500,6 +599,22 @@ "href": "https://keyboardz.co/", "tags": "ecommerce" }, + { + "title": "Home", + "imgSrc": "/showcases/itbusinesshub_com_.webp", + "perf": { + "score": 0.84, + "fcpDisplay": "2.1 s", + "fcpScore": 0.8, + "lcpDisplay": "2.2 s", + "lcpScore": 0.94, + "ttiDisplay": "6.2 s", + "ttiScore": 0.62, + "ttiTime": 6221.75 + }, + "href": "https://itbusinesshub.com/", + "tags": "blog" + }, { "title": "Main page - Travel Calculator", "imgSrc": "/showcases/travelcalc_pages_dev.webp", @@ -531,5 +646,150 @@ }, "href": "https://upester.com", "tags": "app" + }, + { + "title": "Pay4Me App | Fastest SEVIS Fees, WES Fees, & Payments", + "imgSrc": "/showcases/pay4me_app.webp", + "perf": { + "score": 0.96, + "fcpDisplay": "1.5 s", + "fcpScore": 0.96, + "lcpDisplay": "2.3 s", + "lcpScore": 0.93, + "ttiDisplay": "4.4 s", + "ttiScore": 0.83, + "ttiTime": 4406 + }, + "href": "https://pay4me.app", + "tags": "saas" + }, + { + "title": "OSM POIS - Cities", + "imgSrc": "/showcases/qwik-osm-poc_netlify_app_.webp", + "perf": { + "score": 1, + "fcpDisplay": "1.2 s", + "fcpScore": 0.99, + "lcpDisplay": "1.2 s", + "lcpScore": 1, + "ttiDisplay": "1.2 s", + "ttiScore": 1, + "ttiTime": 1195 + }, + "href": "https://qwik-osm-poc.netlify.app/", + "tags": "site" + }, + { + "title": "Welcome to LeoNerd", + "imgSrc": "/showcases/leonerd_blog.webp", + "perf": { + "score": 0.93, + "fcpDisplay": "1.2 s", + "fcpScore": 0.99, + "lcpDisplay": "1.6 s", + "lcpScore": 0.99, + "ttiDisplay": "2.2 s", + "ttiScore": 0.99, + "ttiTime": 2180 + }, + "href": "https://leonerd.blog", + "tags": "portfolio" + }, + { + "title": "Seifen - detergente ultra concentrado para ropa deportiva", + "imgSrc": "/showcases/seifen_vercel_app_.webp", + "perf": { + "score": 1, + "fcpDisplay": "1.1 s", + "fcpScore": 0.99, + "lcpDisplay": "1.1 s", + "lcpScore": 1, + "ttiDisplay": "1.1 s", + "ttiScore": 1, + "ttiTime": 1077.5 + }, + "href": "https://seifen.vercel.app/", + "tags": "site" + }, + { + "title": "Built with Appwrite", + "imgSrc": "/showcases/builtwith_appwrite_io_.webp", + "perf": { + "score": 0.79, + "fcpDisplay": "3.4 s", + "fcpScore": 0.39, + "lcpDisplay": "3.4 s", + "lcpScore": 0.66, + "ttiDisplay": "3.4 s", + "ttiScore": 0.93, + "ttiTime": 3391.5 + }, + "href": "https://builtwith.appwrite.io/", + "tags": "site", + "repo": "https://github.com/appwrite/builtwith" + }, + { + "title": "RadixStream - Rapid Cloudflare Stream plugin for WordPress", + "imgSrc": "/showcases/radixstream_com_.webp", + "perf": { + "score": 1, + "fcpDisplay": "1.0 s", + "fcpScore": 1, + "lcpDisplay": "1.0 s", + "lcpScore": 1, + "ttiDisplay": "3.1 s", + "ttiScore": 0.95, + "ttiTime": 3134.5 + }, + "href": "https://radixstream.com/", + "tags": "site" + }, + { + "title": "Anirban Das - Fullstack Developer & UX Designer", + "imgSrc": "/showcases/www_anirbandas_in_.webp", + "perf": { + "score": 0.89, + "fcpDisplay": "2.9 s", + "fcpScore": 0.53, + "lcpDisplay": "2.9 s", + "lcpScore": 0.81, + "ttiDisplay": "4.0 s", + "ttiScore": 0.88, + "ttiTime": 3975 + }, + "href": "https://www.anirbandas.in/", + "tags": "portfolio" + }, + { + "title": "Qwik meet", + "imgSrc": "/showcases/qwik-meet_onrender_com_.webp", + "perf": { + "score": 0.98, + "fcpDisplay": "1.9 s", + "fcpScore": 0.86, + "lcpDisplay": "1.9 s", + "lcpScore": 0.97, + "ttiDisplay": "1.9 s", + "ttiScore": 0.99, + "ttiTime": 1946.5 + }, + "href": "https://qwik-meet.onrender.com/", + "tags": "webrtc" + }, + { + "title": "Polaris: AI-powered Site Reliability", + "imgSrc": "/showcases/getpolaris_ai_.webp", + "perf": { + "score": 0.76, + "fcpDisplay": "2.7 s", + "fcpScore": 0.6, + "lcpDisplay": "4.5 s", + "lcpScore": 0.38, + "ttiDisplay": "6.0 s", + "ttiScore": 0.65, + "ttiTime": 5950.25 + }, + "href": "https://getpolaris.ai/", + "tags": "saas" } ] diff --git a/packages/docs/src/routes/api/qwik-city-vite-bun-server/api.json b/packages/docs/src/routes/api/qwik-city-vite-bun-server/api.json index aa6825cb586..7fd88979bda 100644 --- a/packages/docs/src/routes/api/qwik-city-vite-bun-server/api.json +++ b/packages/docs/src/routes/api/qwik-city-vite-bun-server/api.json @@ -1,5 +1,34 @@ { "id": "qwik-city-vite-bun-server", "package": "@builder.io/qwik-city/vite/bun-server", - "members": [] + "members": [ + { + "name": "bunServerAdapter", + "id": "bunserveradapter", + "hierarchy": [ + { + "name": "bunServerAdapter", + "id": "bunserveradapter" + } + ], + "kind": "Function", + "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\n\n\n```typescript\nexport declare function bunServerAdapter(opts?: bunServerAdapterOptions): any;\n```\n\n\n| Parameter | Type | Description |\n| --- | --- | --- |\n| opts | [bunServerAdapterOptions](#bunserveradapteroptions) | _(Optional)_ |\n\n**Returns:**\n\nany", + "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/adapters/bun-server/vite/index.ts", + "mdFile": "qwik-city.bunserveradapter.md" + }, + { + "name": "bunServerAdapterOptions", + "id": "bunserveradapteroptions", + "hierarchy": [ + { + "name": "bunServerAdapterOptions", + "id": "bunserveradapteroptions" + } + ], + "kind": "Interface", + "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\n\n\n```typescript\nexport interface bunServerAdapterOptions extends ServerAdapterOptions \n```\n**Extends:** ServerAdapterOptions\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [name?](#) | | string | **_(ALPHA)_** _(Optional)_ |", + "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/adapters/bun-server/vite/index.ts", + "mdFile": "qwik-city.bunserveradapteroptions.md" + } + ] } \ No newline at end of file diff --git a/packages/docs/src/routes/api/qwik-city-vite-bun-server/index.md b/packages/docs/src/routes/api/qwik-city-vite-bun-server/index.md index f78c6971459..6a2e5218bb3 100644 --- a/packages/docs/src/routes/api/qwik-city-vite-bun-server/index.md +++ b/packages/docs/src/routes/api/qwik-city-vite-bun-server/index.md @@ -3,3 +3,37 @@ title: \@builder.io/qwik-city/vite/bun-server API Reference --- # [API](/api) › @builder.io/qwik-city/vite/bun-server + +## bunServerAdapter + +> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. + +```typescript +export declare function bunServerAdapter(opts?: bunServerAdapterOptions): any; +``` + +| Parameter | Type | Description | +| --------- | --------------------------------------------------- | ------------ | +| opts | [bunServerAdapterOptions](#bunserveradapteroptions) | _(Optional)_ | + +**Returns:** + +any + +[Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/adapters/bun-server/vite/index.ts) + +## bunServerAdapterOptions + +> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. + +```typescript +export interface bunServerAdapterOptions extends ServerAdapterOptions +``` + +**Extends:** ServerAdapterOptions + +| Property | Modifiers | Type | Description | +| ---------- | --------- | ------ | -------------------------- | +| [name?](#) | | string | **_(ALPHA)_** _(Optional)_ | + +[Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/adapters/bun-server/vite/index.ts) diff --git a/packages/docs/src/routes/api/qwik-city-vite-netlify-edge/api.json b/packages/docs/src/routes/api/qwik-city-vite-netlify-edge/api.json index a27f6213914..da3e6140ea3 100644 --- a/packages/docs/src/routes/api/qwik-city-vite-netlify-edge/api.json +++ b/packages/docs/src/routes/api/qwik-city-vite-netlify-edge/api.json @@ -26,7 +26,7 @@ } ], "kind": "Interface", - "content": "```typescript\nexport interface NetlifyEdgeAdapterOptions extends ServerAdapterOptions \n```\n**Extends:** ServerAdapterOptions\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [excludedPath?](#) | | string \\| string\\[\\] |

_(Optional)_ Manually add path pattern that should be excluded from the edge function routes that are created by the 'manifest.json' file.

If not specified, the following paths are excluded by default: /build/\\* /favicon.ico /robots.txt /mainifest.json /\\~partytown/\\* /service-worker.js /sitemap.xml

https://docs.netlify.com/edge-functions/declarations/\\#declare-edge-functions-in-netlify-toml

|\n| [functionRoutes?](#) | | boolean |

_(Optional)_ Determines if the build should generate the edge functions declarations manifest.json file.

https://docs.netlify.com/edge-functions/declarations/

Defaults to true.

|\n| [staticPaths?](#) | | string\\[\\] | _(Optional)_ Manually add pathnames that should be treated as static paths and not SSR. For example, when these pathnames are requested, their response should come from a static file, rather than a server-side rendered response. |", + "content": "```typescript\nexport interface NetlifyEdgeAdapterOptions extends ServerAdapterOptions \n```\n**Extends:** ServerAdapterOptions\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [excludedPath?](#) | | string \\| string\\[\\] |

_(Optional)_ Manually add path pattern that should be excluded from the edge function routes that are created by the 'manifest.json' file.

If not specified, the following paths are excluded by default:

- /build/\\* - /favicon.ico - /robots.txt - /mainifest.json - /\\~partytown/\\* - /service-worker.js - /sitemap.xml

https://docs.netlify.com/edge-functions/declarations/\\#declare-edge-functions-in-netlify-toml

|\n| [functionRoutes?](#) | | boolean |

_(Optional)_ Determines if the build should generate the edge functions declarations manifest.json file.

https://docs.netlify.com/edge-functions/declarations/

Defaults to true.

|\n| [staticPaths?](#) | | string\\[\\] | _(Optional)_ Manually add pathnames that should be treated as static paths and not SSR. For example, when these pathnames are requested, their response should come from a static file, rather than a server-side rendered response. |", "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/adapters/netlify-edge/vite/index.ts", "mdFile": "qwik-city.netlifyedgeadapteroptions.md" } diff --git a/packages/docs/src/routes/api/qwik-city-vite-netlify-edge/index.md b/packages/docs/src/routes/api/qwik-city-vite-netlify-edge/index.md index edc1f1f6443..fa0238d127c 100644 --- a/packages/docs/src/routes/api/qwik-city-vite-netlify-edge/index.md +++ b/packages/docs/src/routes/api/qwik-city-vite-netlify-edge/index.md @@ -30,10 +30,10 @@ export interface NetlifyEdgeAdapterOptions extends ServerAdapterOptions **Extends:** ServerAdapterOptions -| Property | Modifiers | Type | Description | -| -------------------- | --------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [excludedPath?](#) | | string \| string[] |

_(Optional)_ Manually add path pattern that should be excluded from the edge function routes that are created by the 'manifest.json' file.

If not specified, the following paths are excluded by default: /build/\* /favicon.ico /robots.txt /mainifest.json /\~partytown/\* /service-worker.js /sitemap.xml

https://docs.netlify.com/edge-functions/declarations/\#declare-edge-functions-in-netlify-toml

| -| [functionRoutes?](#) | | boolean |

_(Optional)_ Determines if the build should generate the edge functions declarations manifest.json file.

https://docs.netlify.com/edge-functions/declarations/

Defaults to true.

| -| [staticPaths?](#) | | string[] | _(Optional)_ Manually add pathnames that should be treated as static paths and not SSR. For example, when these pathnames are requested, their response should come from a static file, rather than a server-side rendered response. | +| Property | Modifiers | Type | Description | +| -------------------- | --------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [excludedPath?](#) | | string \| string[] |

_(Optional)_ Manually add path pattern that should be excluded from the edge function routes that are created by the 'manifest.json' file.

If not specified, the following paths are excluded by default:

- /build/\* - /favicon.ico - /robots.txt - /mainifest.json - /\~partytown/\* - /service-worker.js - /sitemap.xml

https://docs.netlify.com/edge-functions/declarations/\#declare-edge-functions-in-netlify-toml

| +| [functionRoutes?](#) | | boolean |

_(Optional)_ Determines if the build should generate the edge functions declarations manifest.json file.

https://docs.netlify.com/edge-functions/declarations/

Defaults to true.

| +| [staticPaths?](#) | | string[] | _(Optional)_ Manually add pathnames that should be treated as static paths and not SSR. For example, when these pathnames are requested, their response should come from a static file, rather than a server-side rendered response. | [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/adapters/netlify-edge/vite/index.ts) diff --git a/packages/docs/src/routes/api/qwik-city-vite-node-server/api.json b/packages/docs/src/routes/api/qwik-city-vite-node-server/api.json index 0cac7d16647..e331fc87761 100644 --- a/packages/docs/src/routes/api/qwik-city-vite-node-server/api.json +++ b/packages/docs/src/routes/api/qwik-city-vite-node-server/api.json @@ -1,5 +1,34 @@ { "id": "qwik-city-vite-node-server", "package": "@builder.io/qwik-city/vite/node-server", - "members": [] + "members": [ + { + "name": "nodeServerAdapter", + "id": "nodeserveradapter", + "hierarchy": [ + { + "name": "nodeServerAdapter", + "id": "nodeserveradapter" + } + ], + "kind": "Function", + "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\n\n\n```typescript\nexport declare function nodeServerAdapter(opts?: NodeServerAdapterOptions): any;\n```\n\n\n| Parameter | Type | Description |\n| --- | --- | --- |\n| opts | [NodeServerAdapterOptions](#nodeserveradapteroptions) | _(Optional)_ |\n\n**Returns:**\n\nany", + "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/adapters/node-server/vite/index.ts", + "mdFile": "qwik-city.nodeserveradapter.md" + }, + { + "name": "NodeServerAdapterOptions", + "id": "nodeserveradapteroptions", + "hierarchy": [ + { + "name": "NodeServerAdapterOptions", + "id": "nodeserveradapteroptions" + } + ], + "kind": "Interface", + "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\n\n\n```typescript\nexport interface NodeServerAdapterOptions extends ServerAdapterOptions \n```\n**Extends:** ServerAdapterOptions\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [name?](#) | | string | **_(ALPHA)_** _(Optional)_ |", + "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/adapters/node-server/vite/index.ts", + "mdFile": "qwik-city.nodeserveradapteroptions.md" + } + ] } \ No newline at end of file diff --git a/packages/docs/src/routes/api/qwik-city-vite-node-server/index.md b/packages/docs/src/routes/api/qwik-city-vite-node-server/index.md index fde8c8748bc..c058b2b701e 100644 --- a/packages/docs/src/routes/api/qwik-city-vite-node-server/index.md +++ b/packages/docs/src/routes/api/qwik-city-vite-node-server/index.md @@ -3,3 +3,37 @@ title: \@builder.io/qwik-city/vite/node-server API Reference --- # [API](/api) › @builder.io/qwik-city/vite/node-server + +## nodeServerAdapter + +> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. + +```typescript +export declare function nodeServerAdapter(opts?: NodeServerAdapterOptions): any; +``` + +| Parameter | Type | Description | +| --------- | ----------------------------------------------------- | ------------ | +| opts | [NodeServerAdapterOptions](#nodeserveradapteroptions) | _(Optional)_ | + +**Returns:** + +any + +[Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/adapters/node-server/vite/index.ts) + +## NodeServerAdapterOptions + +> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. + +```typescript +export interface NodeServerAdapterOptions extends ServerAdapterOptions +``` + +**Extends:** ServerAdapterOptions + +| Property | Modifiers | Type | Description | +| ---------- | --------- | ------ | -------------------------- | +| [name?](#) | | string | **_(ALPHA)_** _(Optional)_ | + +[Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/adapters/node-server/vite/index.ts) diff --git a/packages/docs/src/routes/api/qwik-city/api.json b/packages/docs/src/routes/api/qwik-city/api.json index e99e5fb29b4..7d651cf7b2f 100644 --- a/packages/docs/src/routes/api/qwik-city/api.json +++ b/packages/docs/src/routes/api/qwik-city/api.json @@ -110,7 +110,7 @@ } ], "kind": "Interface", - "content": "```typescript\nexport interface DocumentHeadValue \n```\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [frontmatter?](#) | readonly | Readonly<Record<string, any>> | _(Optional)_ Arbitrary object containing custom data. When the document head is created from markdown files, the frontmatter attributes that are not recognized as a well-known meta names (such as title, description, author, etc...), are stored in this property. |\n| [links?](#) | readonly | readonly [DocumentLink](#documentlink)\\[\\] | _(Optional)_ Used to manually append <link> elements to the <head>. |\n| [meta?](#) | readonly | readonly [DocumentMeta](#documentmeta)\\[\\] | _(Optional)_ Used to manually set meta tags in the head. Additionally, the data property could be used to set arbitrary data which the <head> component could later use to generate <meta> tags. |\n| [scripts?](#) | readonly | readonly DocumentScript\\[\\] | _(Optional)_ Used to manually append <script> elements to the <head>. |\n| [styles?](#) | readonly | readonly [DocumentStyle](#documentstyle)\\[\\] | _(Optional)_ Used to manually append <style> elements to the <head>. |\n| [title?](#) | readonly | string | _(Optional)_ Sets document.title. |", + "content": "```typescript\nexport interface DocumentHeadValue \n```\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [frontmatter?](#) | readonly | Readonly<Record<string, any>> | _(Optional)_ Arbitrary object containing custom data. When the document head is created from markdown files, the frontmatter attributes that are not recognized as a well-known meta names (such as title, description, author, etc...), are stored in this property. |\n| [links?](#) | readonly | readonly [DocumentLink](#documentlink)\\[\\] | _(Optional)_ Used to manually append <link> elements to the <head>. |\n| [meta?](#) | readonly | readonly [DocumentMeta](#documentmeta)\\[\\] | _(Optional)_ Used to manually set meta tags in the head. Additionally, the data property could be used to set arbitrary data which the <head> component could later use to generate <meta> tags. |\n| [scripts?](#) | readonly | readonly [DocumentScript](#documentscript)\\[\\] | _(Optional)_ Used to manually append <script> elements to the <head>. |\n| [styles?](#) | readonly | readonly [DocumentStyle](#documentstyle)\\[\\] | _(Optional)_ Used to manually append <style> elements to the <head>. |\n| [title?](#) | readonly | string | _(Optional)_ Sets document.title. |", "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/runtime/src/types.ts", "mdFile": "qwik-city.documentheadvalue.md" }, @@ -142,6 +142,20 @@ "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/runtime/src/types.ts", "mdFile": "qwik-city.documentmeta.md" }, + { + "name": "DocumentScript", + "id": "documentscript", + "hierarchy": [ + { + "name": "DocumentScript", + "id": "documentscript" + } + ], + "kind": "Interface", + "content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\n\n\n```typescript\nexport interface DocumentScript \n```\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [key?](#) | readonly | string | **_(ALPHA)_** _(Optional)_ |\n| [props?](#) | readonly | Readonly<QwikIntrinsicElements\\['script'\\]> | **_(ALPHA)_** _(Optional)_ |\n| [script?](#) | readonly | string | **_(ALPHA)_** _(Optional)_ |", + "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/runtime/src/types.ts", + "mdFile": "qwik-city.documentscript.md" + }, { "name": "DocumentStyle", "id": "documentstyle", diff --git a/packages/docs/src/routes/api/qwik-city/index.md b/packages/docs/src/routes/api/qwik-city/index.md index 51da166eb0a..3ea094e18ae 100644 --- a/packages/docs/src/routes/api/qwik-city/index.md +++ b/packages/docs/src/routes/api/qwik-city/index.md @@ -119,14 +119,14 @@ export interface DocumentHeadProps extends RouteLocation export interface DocumentHeadValue ``` -| Property | Modifiers | Type | Description | -| ----------------- | --------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [frontmatter?](#) | readonly | Readonly<Record<string, any>> | _(Optional)_ Arbitrary object containing custom data. When the document head is created from markdown files, the frontmatter attributes that are not recognized as a well-known meta names (such as title, description, author, etc...), are stored in this property. | -| [links?](#) | readonly | readonly [DocumentLink](#documentlink)[] | _(Optional)_ Used to manually append <link> elements to the <head>. | -| [meta?](#) | readonly | readonly [DocumentMeta](#documentmeta)[] | _(Optional)_ Used to manually set meta tags in the head. Additionally, the data property could be used to set arbitrary data which the <head> component could later use to generate <meta> tags. | -| [scripts?](#) | readonly | readonly DocumentScript[] | _(Optional)_ Used to manually append <script> elements to the <head>. | -| [styles?](#) | readonly | readonly [DocumentStyle](#documentstyle)[] | _(Optional)_ Used to manually append <style> elements to the <head>. | -| [title?](#) | readonly | string | _(Optional)_ Sets document.title. | +| Property | Modifiers | Type | Description | +| ----------------- | --------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [frontmatter?](#) | readonly | Readonly<Record<string, any>> | _(Optional)_ Arbitrary object containing custom data. When the document head is created from markdown files, the frontmatter attributes that are not recognized as a well-known meta names (such as title, description, author, etc...), are stored in this property. | +| [links?](#) | readonly | readonly [DocumentLink](#documentlink)[] | _(Optional)_ Used to manually append <link> elements to the <head>. | +| [meta?](#) | readonly | readonly [DocumentMeta](#documentmeta)[] | _(Optional)_ Used to manually set meta tags in the head. Additionally, the data property could be used to set arbitrary data which the <head> component could later use to generate <meta> tags. | +| [scripts?](#) | readonly | readonly [DocumentScript](#documentscript)[] | _(Optional)_ Used to manually append <script> elements to the <head>. | +| [styles?](#) | readonly | readonly [DocumentStyle](#documentstyle)[] | _(Optional)_ Used to manually append <style> elements to the <head>. | +| [title?](#) | readonly | string | _(Optional)_ Sets document.title. | [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/runtime/src/types.ts) @@ -176,6 +176,22 @@ export interface DocumentMeta [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/runtime/src/types.ts) +## DocumentScript + +> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment. + +```typescript +export interface DocumentScript +``` + +| Property | Modifiers | Type | Description | +| ------------ | --------------------- | ----------------------------------------------- | -------------------------- | +| [key?](#) | readonly | string | **_(ALPHA)_** _(Optional)_ | +| [props?](#) | readonly | Readonly<QwikIntrinsicElements['script']> | **_(ALPHA)_** _(Optional)_ | +| [script?](#) | readonly | string | **_(ALPHA)_** _(Optional)_ | + +[Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-city/runtime/src/types.ts) + ## DocumentStyle ```typescript diff --git a/packages/docs/src/routes/api/qwik-optimizer/api.json b/packages/docs/src/routes/api/qwik-optimizer/api.json index 53595cd9dcc..27596ca1879 100644 --- a/packages/docs/src/routes/api/qwik-optimizer/api.json +++ b/packages/docs/src/routes/api/qwik-optimizer/api.json @@ -196,6 +196,20 @@ "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts", "mdFile": "qwik.inlineentrystrategy.md" }, + { + "name": "InsightManifest", + "id": "insightmanifest", + "hierarchy": [ + { + "name": "InsightManifest", + "id": "insightmanifest" + } + ], + "kind": "Interface", + "content": "```typescript\nexport interface InsightManifest \n```\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [manual](#) | | Record<string, string> | |\n| [prefetch](#) | | { route: string; symbols: string\\[\\]; }\\[\\] | |\n| [type](#) | | 'smart' | |", + "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts", + "mdFile": "qwik.insightmanifest.md" + }, { "name": "isAbsolute", "id": "path-isabsolute", @@ -414,7 +428,7 @@ } ], "kind": "Interface", - "content": "```typescript\nexport interface QwikRollupPluginOptions \n```\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [buildMode?](#) | | [QwikBuildMode](#qwikbuildmode) | _(Optional)_ Build production or development. Default development |\n| [csr?](#) | | boolean | _(Optional)_ |\n| [debug?](#) | | boolean | _(Optional)_ Prints verbose Qwik plugin debug logs. Default false |\n| [entryStrategy?](#) | | [EntryStrategy](#entrystrategy) | _(Optional)_ The Qwik entry strategy to use while building for production. During development the type is always hook. Default { type: "smart" }) |\n| [manifestInput?](#) | | [QwikManifest](#qwikmanifest) | _(Optional)_ The SSR build requires the manifest generated during the client build. The manifestInput option can be used to manually provide a manifest. Default undefined |\n| [manifestOutput?](#) | | (manifest: [QwikManifest](#qwikmanifest)) => Promise<void> \\| void | _(Optional)_ The client build will create a manifest and this hook is called with the generated build data. Default undefined |\n| [optimizerOptions?](#) | | [OptimizerOptions](#optimizeroptions) | _(Optional)_ |\n| [rootDir?](#) | | string | _(Optional)_ The root of the application, which is commonly the same directory as package.json and rollup.config.js. Default process.cwd() |\n| [srcDir?](#) | | string | _(Optional)_ The source directory to find all the Qwik components. Since Qwik does not have a single input, the srcDir is used to recursively find Qwik files. Default src |\n| [srcInputs?](#) | | [TransformModuleInput](#transformmoduleinput)\\[\\] \\| null | _(Optional)_ Alternative to srcDir, where srcInputs is able to provide the files manually. This option is useful for an environment without a file system, such as a webworker. Default: null |\n| [target?](#) | | [QwikBuildTarget](#qwikbuildtarget) | _(Optional)_ Target client or ssr. Default client |\n| [transformedModuleOutput?](#) | | ((transformedModules: [TransformModule](#transformmodule)\\[\\]) => Promise<void> \\| void) \\| null | _(Optional)_ Hook that's called after the build and provides all of the transformed modules that were used before bundling. |", + "content": "```typescript\nexport interface QwikRollupPluginOptions \n```\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [buildMode?](#) | | [QwikBuildMode](#qwikbuildmode) |

_(Optional)_ Build production or development.

Default development

|\n| [csr?](#) | | boolean | _(Optional)_ |\n| [debug?](#) | | boolean |

_(Optional)_ Prints verbose Qwik plugin debug logs.

Default false

|\n| [entryStrategy?](#) | | [EntryStrategy](#entrystrategy) |

_(Optional)_ The Qwik entry strategy to use while building for production. During development the type is always hook.

Default { type: "smart" })

|\n| [manifestInput?](#) | | [QwikManifest](#qwikmanifest) |

_(Optional)_ The SSR build requires the manifest generated during the client build. The manifestInput option can be used to manually provide a manifest.

Default undefined

|\n| [manifestOutput?](#) | | (manifest: [QwikManifest](#qwikmanifest)) => Promise<void> \\| void |

_(Optional)_ The client build will create a manifest and this hook is called with the generated build data.

Default undefined

|\n| [optimizerOptions?](#) | | [OptimizerOptions](#optimizeroptions) | _(Optional)_ |\n| [rootDir?](#) | | string |

_(Optional)_ The root of the application, which is commonly the same directory as package.json and rollup.config.js.

Default process.cwd()

|\n| [srcDir?](#) | | string |

_(Optional)_ The source directory to find all the Qwik components. Since Qwik does not have a single input, the srcDir is used to recursively find Qwik files.

Default src

|\n| [srcInputs?](#) | | [TransformModuleInput](#transformmoduleinput)\\[\\] \\| null |

_(Optional)_ Alternative to srcDir, where srcInputs is able to provide the files manually. This option is useful for an environment without a file system, such as a webworker.

Default: null

|\n| [target?](#) | | [QwikBuildTarget](#qwikbuildtarget) |

_(Optional)_ Target client or ssr.

Default client

|\n| [transformedModuleOutput?](#) | | ((transformedModules: [TransformModule](#transformmodule)\\[\\]) => Promise<void> \\| void) \\| null | _(Optional)_ Hook that's called after the build and provides all of the transformed modules that were used before bundling. |", "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/rollup.ts", "mdFile": "qwik.qwikrolluppluginoptions.md" }, @@ -484,7 +498,7 @@ } ], "kind": "Interface", - "content": "```typescript\nexport interface QwikVitePluginApi \n```\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [getClientOutDir](#) | | () => string \\| null | |\n| [getClientPublicOutDir](#) | | () => string \\| null | |\n| [getManifest](#) | | () => [QwikManifest](#qwikmanifest) \\| null | |\n| [getOptimizer](#) | | () => [Optimizer](#optimizer) \\| null | |\n| [getOptions](#) | | () => NormalizedQwikPluginOptions | |\n| [getRootDir](#) | | () => string \\| null | |", + "content": "```typescript\nexport interface QwikVitePluginApi \n```\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [getClientOutDir](#) | | () => string \\| null | |\n| [getClientPublicOutDir](#) | | () => string \\| null | |\n| [getInsightsManifest](#) | | () => Promise<[InsightManifest](#insightmanifest) \\| null> | |\n| [getManifest](#) | | () => [QwikManifest](#qwikmanifest) \\| null | |\n| [getOptimizer](#) | | () => [Optimizer](#optimizer) \\| null | |\n| [getOptions](#) | | () => NormalizedQwikPluginOptions | |\n| [getRootDir](#) | | () => string \\| null | |", "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/vite.ts", "mdFile": "qwik.qwikvitepluginapi.md" }, diff --git a/packages/docs/src/routes/api/qwik-optimizer/index.md b/packages/docs/src/routes/api/qwik-optimizer/index.md index e9573ddab73..576cf61e6c4 100644 --- a/packages/docs/src/routes/api/qwik-optimizer/index.md +++ b/packages/docs/src/routes/api/qwik-optimizer/index.md @@ -192,6 +192,20 @@ export interface InlineEntryStrategy [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts) +## InsightManifest + +```typescript +export interface InsightManifest +``` + +| Property | Modifiers | Type | Description | +| ------------- | --------- | --------------------------------------- | ----------- | +| [manual](#) | | Record<string, string> | | +| [prefetch](#) | | { route: string; symbols: string[]; }[] | | +| [type](#) | | 'smart' | | + +[Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts) + ## isAbsolute ```typescript @@ -416,20 +430,20 @@ any export interface QwikRollupPluginOptions ``` -| Property | Modifiers | Type | Description | -| ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [buildMode?](#) | | [QwikBuildMode](#qwikbuildmode) | _(Optional)_ Build production or development. Default development | -| [csr?](#) | | boolean | _(Optional)_ | -| [debug?](#) | | boolean | _(Optional)_ Prints verbose Qwik plugin debug logs. Default false | -| [entryStrategy?](#) | | [EntryStrategy](#entrystrategy) | _(Optional)_ The Qwik entry strategy to use while building for production. During development the type is always hook. Default { type: "smart" }) | -| [manifestInput?](#) | | [QwikManifest](#qwikmanifest) | _(Optional)_ The SSR build requires the manifest generated during the client build. The manifestInput option can be used to manually provide a manifest. Default undefined | -| [manifestOutput?](#) | | (manifest: [QwikManifest](#qwikmanifest)) => Promise<void> \| void | _(Optional)_ The client build will create a manifest and this hook is called with the generated build data. Default undefined | -| [optimizerOptions?](#) | | [OptimizerOptions](#optimizeroptions) | _(Optional)_ | -| [rootDir?](#) | | string | _(Optional)_ The root of the application, which is commonly the same directory as package.json and rollup.config.js. Default process.cwd() | -| [srcDir?](#) | | string | _(Optional)_ The source directory to find all the Qwik components. Since Qwik does not have a single input, the srcDir is used to recursively find Qwik files. Default src | -| [srcInputs?](#) | | [TransformModuleInput](#transformmoduleinput)[] \| null | _(Optional)_ Alternative to srcDir, where srcInputs is able to provide the files manually. This option is useful for an environment without a file system, such as a webworker. Default: null | -| [target?](#) | | [QwikBuildTarget](#qwikbuildtarget) | _(Optional)_ Target client or ssr. Default client | -| [transformedModuleOutput?](#) | | ((transformedModules: [TransformModule](#transformmodule)[]) => Promise<void> \| void) \| null | _(Optional)_ Hook that's called after the build and provides all of the transformed modules that were used before bundling. | +| Property | Modifiers | Type | Description | +| ----------------------------- | --------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [buildMode?](#) | | [QwikBuildMode](#qwikbuildmode) |

_(Optional)_ Build production or development.

Default development

| +| [csr?](#) | | boolean | _(Optional)_ | +| [debug?](#) | | boolean |

_(Optional)_ Prints verbose Qwik plugin debug logs.

Default false

| +| [entryStrategy?](#) | | [EntryStrategy](#entrystrategy) |

_(Optional)_ The Qwik entry strategy to use while building for production. During development the type is always hook.

Default { type: "smart" })

| +| [manifestInput?](#) | | [QwikManifest](#qwikmanifest) |

_(Optional)_ The SSR build requires the manifest generated during the client build. The manifestInput option can be used to manually provide a manifest.

Default undefined

| +| [manifestOutput?](#) | | (manifest: [QwikManifest](#qwikmanifest)) => Promise<void> \| void |

_(Optional)_ The client build will create a manifest and this hook is called with the generated build data.

Default undefined

| +| [optimizerOptions?](#) | | [OptimizerOptions](#optimizeroptions) | _(Optional)_ | +| [rootDir?](#) | | string |

_(Optional)_ The root of the application, which is commonly the same directory as package.json and rollup.config.js.

Default process.cwd()

| +| [srcDir?](#) | | string |

_(Optional)_ The source directory to find all the Qwik components. Since Qwik does not have a single input, the srcDir is used to recursively find Qwik files.

Default src

| +| [srcInputs?](#) | | [TransformModuleInput](#transformmoduleinput)[] \| null |

_(Optional)_ Alternative to srcDir, where srcInputs is able to provide the files manually. This option is useful for an environment without a file system, such as a webworker.

Default: null

| +| [target?](#) | | [QwikBuildTarget](#qwikbuildtarget) |

_(Optional)_ Target client or ssr.

Default client

| +| [transformedModuleOutput?](#) | | ((transformedModules: [TransformModule](#transformmodule)[]) => Promise<void> \| void) \| null | _(Optional)_ Hook that's called after the build and provides all of the transformed modules that were used before bundling. | [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/rollup.ts) @@ -501,14 +515,15 @@ export interface QwikVitePlugin export interface QwikVitePluginApi ``` -| Property | Modifiers | Type | Description | -| -------------------------- | --------- | ---------------------------------------------- | ----------- | -| [getClientOutDir](#) | | () => string \| null | | -| [getClientPublicOutDir](#) | | () => string \| null | | -| [getManifest](#) | | () => [QwikManifest](#qwikmanifest) \| null | | -| [getOptimizer](#) | | () => [Optimizer](#optimizer) \| null | | -| [getOptions](#) | | () => NormalizedQwikPluginOptions | | -| [getRootDir](#) | | () => string \| null | | +| Property | Modifiers | Type | Description | +| -------------------------- | --------- | ------------------------------------------------------------------- | ----------- | +| [getClientOutDir](#) | | () => string \| null | | +| [getClientPublicOutDir](#) | | () => string \| null | | +| [getInsightsManifest](#) | | () => Promise<[InsightManifest](#insightmanifest) \| null> | | +| [getManifest](#) | | () => [QwikManifest](#qwikmanifest) \| null | | +| [getOptimizer](#) | | () => [Optimizer](#optimizer) \| null | | +| [getOptions](#) | | () => NormalizedQwikPluginOptions | | +| [getRootDir](#) | | () => string \| null | | [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/optimizer/src/plugins/vite.ts) diff --git a/packages/docs/src/routes/api/qwik-server/api.json b/packages/docs/src/routes/api/qwik-server/api.json index 0d3137cdf55..8ce2abec9f3 100644 --- a/packages/docs/src/routes/api/qwik-server/api.json +++ b/packages/docs/src/routes/api/qwik-server/api.json @@ -138,7 +138,7 @@ } ], "kind": "Interface", - "content": "```typescript\nexport interface RenderOptions extends SerializeDocumentOptions \n```\n**Extends:** [SerializeDocumentOptions](#serializedocumentoptions)\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [base?](#) | | string \\| ((options: [RenderOptions](#renderoptions)) => string) | _(Optional)_ Specifies the root of the JS files of the client build. Setting a base, will cause the render of the q:base attribute in the q:container element. |\n| [containerAttributes?](#) | | Record<string, string> | _(Optional)_ |\n| [containerTagName?](#) | | string | _(Optional)_ When set, the app is serialized into a fragment. And the returned html is not a complete document. Defaults to html |\n| [locale?](#) | | string \\| ((options: [RenderOptions](#renderoptions)) => string) | _(Optional)_ Language to use when rendering the document. |\n| [prefetchStrategy?](#) | | [PrefetchStrategy](#prefetchstrategy) \\| null | _(Optional)_ |\n| [qwikLoader?](#) | | [QwikLoaderOptions](#qwikloaderoptions) | _(Optional)_ Specifies if the Qwik Loader script is added to the document or not. Defaults to { include: true }. |\n| [serverData?](#) | | Record<string, any> | _(Optional)_ |\n| [snapshot?](#) | | boolean | _(Optional)_ Defaults to true |", + "content": "```typescript\nexport interface RenderOptions extends SerializeDocumentOptions \n```\n**Extends:** [SerializeDocumentOptions](#serializedocumentoptions)\n\n\n| Property | Modifiers | Type | Description |\n| --- | --- | --- | --- |\n| [base?](#) | | string \\| ((options: [RenderOptions](#renderoptions)) => string) | _(Optional)_ Specifies the root of the JS files of the client build. Setting a base, will cause the render of the q:base attribute in the q:container element. |\n| [containerAttributes?](#) | | Record<string, string> | _(Optional)_ |\n| [containerTagName?](#) | | string | _(Optional)_ When set, the app is serialized into a fragment. And the returned html is not a complete document. Defaults to html |\n| [locale?](#) | | string \\| ((options: [RenderOptions](#renderoptions)) => string) | _(Optional)_ Language to use when rendering the document. |\n| [prefetchStrategy?](#) | | [PrefetchStrategy](#prefetchstrategy) \\| null | _(Optional)_ |\n| [qwikLoader?](#) | | [QwikLoaderOptions](#qwikloaderoptions) |

_(Optional)_ Specifies if the Qwik Loader script is added to the document or not.

Defaults to { include: true }.

|\n| [serverData?](#) | | Record<string, any> | _(Optional)_ |\n| [snapshot?](#) | | boolean | _(Optional)_ Defaults to true |", "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/server/types.ts", "mdFile": "qwik.renderoptions.md" }, @@ -334,7 +334,7 @@ } ], "kind": "TypeAlias", - "content": "auto: Prefetch all possible QRLs used by the document. Default\n\n\n```typescript\nexport type SymbolsToPrefetch = 'auto' | ((opts: {\n manifest: QwikManifest;\n}) => PrefetchResource[]);\n```\n**References:** [PrefetchResource](#prefetchresource)", + "content": "Auto: Prefetch all possible QRLs used by the document. Default\n\n\n```typescript\nexport type SymbolsToPrefetch = 'auto' | ((opts: {\n manifest: QwikManifest;\n}) => PrefetchResource[]);\n```\n**References:** [PrefetchResource](#prefetchresource)", "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/server/types.ts", "mdFile": "qwik.symbolstoprefetch.md" }, diff --git a/packages/docs/src/routes/api/qwik-server/index.md b/packages/docs/src/routes/api/qwik-server/index.md index 87ddc2280db..83e6fd6b481 100644 --- a/packages/docs/src/routes/api/qwik-server/index.md +++ b/packages/docs/src/routes/api/qwik-server/index.md @@ -149,7 +149,7 @@ export interface RenderOptions extends SerializeDocumentOptions | [containerTagName?](#) | | string | _(Optional)_ When set, the app is serialized into a fragment. And the returned html is not a complete document. Defaults to html | | [locale?](#) | | string \| ((options: [RenderOptions](#renderoptions)) => string) | _(Optional)_ Language to use when rendering the document. | | [prefetchStrategy?](#) | | [PrefetchStrategy](#prefetchstrategy) \| null | _(Optional)_ | -| [qwikLoader?](#) | | [QwikLoaderOptions](#qwikloaderoptions) | _(Optional)_ Specifies if the Qwik Loader script is added to the document or not. Defaults to { include: true }. | +| [qwikLoader?](#) | | [QwikLoaderOptions](#qwikloaderoptions) |

_(Optional)_ Specifies if the Qwik Loader script is added to the document or not.

Defaults to { include: true }.

| | [serverData?](#) | | Record<string, any> | _(Optional)_ | | [snapshot?](#) | | boolean | _(Optional)_ Defaults to true | @@ -338,7 +338,7 @@ export interface StreamingOptions ## SymbolsToPrefetch -auto: Prefetch all possible QRLs used by the document. Default +Auto: Prefetch all possible QRLs used by the document. Default ```typescript export type SymbolsToPrefetch = diff --git a/packages/docs/src/routes/api/qwik/api.json b/packages/docs/src/routes/api/qwik/api.json index ae6227559df..651d27b0534 100644 --- a/packages/docs/src/routes/api/qwik/api.json +++ b/packages/docs/src/routes/api/qwik/api.json @@ -293,7 +293,7 @@ } ], "kind": "TypeAlias", - "content": "Type representing the Qwik component.\n\n`Component` is the type returned by invoking `component$`.\n\n```\ninterface MyComponentProps {\n someProp: string;\n}\nconst MyComponent: Component = component$((props: MyComponentProps) => {\n return {props.someProp};\n});\n```\n\n\n```typescript\nexport type Component = FunctionComponent>;\n```\n**References:** [FunctionComponent](#functioncomponent), [PublicProps](#publicprops)", + "content": "Type representing the Qwik component.\n\n`Component` is the type returned by invoking `component$`.\n\n```tsx\ninterface MyComponentProps {\n someProp: string;\n}\nconst MyComponent: Component = component$((props: MyComponentProps) => {\n return {props.someProp};\n});\n```\n\n\n```typescript\nexport type Component = FunctionComponent>;\n```\n**References:** [FunctionComponent](#functioncomponent), [PublicProps](#publicprops)", "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/component/component.public.ts", "mdFile": "qwik.component.md" }, @@ -1023,6 +1023,20 @@ "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/render/jsx/types/jsx-generated.ts", "mdFile": "qwik.intrinsicsvgelements.md" }, + { + "name": "isSignal", + "id": "issignal", + "hierarchy": [ + { + "name": "isSignal", + "id": "issignal" + } + ], + "kind": "Variable", + "content": "Checks if a given object is a `Signal`.\n\n\n```typescript\nisSignal: (obj: any) => obj is Signal\n```", + "editUrl": "https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/state/signal.ts", + "mdFile": "qwik.issignal.md" + }, { "name": "jsx", "id": "jsx", diff --git a/packages/docs/src/routes/api/qwik/index.md b/packages/docs/src/routes/api/qwik/index.md index 3d888e3f8f3..9d4b11a9d20 100644 --- a/packages/docs/src/routes/api/qwik/index.md +++ b/packages/docs/src/routes/api/qwik/index.md @@ -29,7 +29,7 @@ Qwik Optimizer marker function. Use `$(...)` to tell Qwik Optimizer to extract the expression in `$(...)` into a lazy-loadable resource referenced by `QRL`. ```typescript -$: (expression: T) => QRL; +$: (expression: T) => QRL; ``` [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/qrl/qrl.public.ts) @@ -372,13 +372,15 @@ Type representing the Qwik component. `Component` is the type returned by invoking `component$`. -``` +```tsx interface MyComponentProps { someProp: string; } -const MyComponent: Component = component$((props: MyComponentProps) => { - return {props.someProp}; -}); +const MyComponent: Component = component$( + (props: MyComponentProps) => { + return {props.someProp}; + }, +); ``` ```typescript @@ -628,7 +630,7 @@ export const Items = component$(() => { ``` ```typescript -createContextId: (name: string) => ContextId; +createContextId: (name: string) => ContextId; ``` [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/use/use-context.ts) @@ -789,7 +791,7 @@ export interface ErrorBoundaryStore ## event$ ```typescript -event$: (first: T) => QRL; +event$: (first: T) => QRL; ``` [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/qrl/qrl.public.ts) @@ -797,7 +799,7 @@ event$: (first: T) => QRL; ## eventQrl ```typescript -eventQrl: (qrl: QRL) => QRL; +eventQrl: (qrl: QRL) => QRL; ``` [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/qrl/qrl.public.ts) @@ -1552,6 +1554,16 @@ export interface IntrinsicSVGElements [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/render/jsx/types/jsx-generated.ts) +## isSignal + +Checks if a given object is a `Signal`. + +```typescript +isSignal: (obj: any) => obj is Signal +``` + +[Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/state/signal.ts) + ## jsx ```typescript @@ -2166,7 +2178,7 @@ Used by Qwik Optimizer to point to lazy-loaded resources. This function should be used by the Qwik Optimizer only. The function should not be directly referred to in the source code of the application. ```typescript -qrl: ( +qrl: ( chunkOrFn: string | (() => Promise), symbol: string, lexicalScopeCapture?: any[], @@ -2183,7 +2195,7 @@ Used by Qwik Optimizer to point to lazy-loaded resources. This function should be used by the Qwik Optimizer only. The function should not be directly referred to in the source code of the application. ```typescript -qrl: ( +qrl: ( chunkOrFn: string | (() => Promise), symbol: string, lexicalScopeCapture?: any[], @@ -2668,7 +2680,7 @@ const Cmp = component$(() => { ``` ```typescript -Resource: (props: ResourceProps) => JSXNode; +Resource: (props: ResourceProps) => JSXNode; ``` [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/use/use-resource.ts) @@ -3569,7 +3581,7 @@ export interface TrackHTMLAttributes extends HTMLAttributes(fn: () => T) => T; +untrack: (fn: () => T) => T; ``` [Edit this section](https://github.com/BuilderIO/qwik/tree/main/packages/qwik/src/core/use/use-core.ts) @@ -3789,7 +3801,7 @@ const Cmp = component$(() => { ``` ```typescript -useResource$: (generatorFn: ResourceFn, opts?: ResourceOptions) => +useResource$: (generatorFn: ResourceFn, opts?: ResourceOptions) => ResourceReturn; ``` @@ -3844,7 +3856,7 @@ const Cmp = component$(() => { ``` ```typescript -useResourceQrl: (qrl: QRL>, opts?: ResourceOptions) => +useResourceQrl: (qrl: QRL>, opts?: ResourceOptions) => ResourceReturn; ``` diff --git a/packages/docs/src/routes/community/groups/index.mdx b/packages/docs/src/routes/community/groups/index.mdx index 4005041a1e8..a130f1046f3 100644 --- a/packages/docs/src/routes/community/groups/index.mdx +++ b/packages/docs/src/routes/community/groups/index.mdx @@ -83,6 +83,10 @@ and spread your love for innovation!

Qwik Argentina Meetup Group

+ +

+

Qwik Morocco Meetup Group

+ ### Newsletters diff --git a/packages/docs/src/routes/demo/integration/modular-forms/index.tsx b/packages/docs/src/routes/demo/integration/modular-forms/index.tsx index b812e8a1fec..96b0f788017 100644 --- a/packages/docs/src/routes/demo/integration/modular-forms/index.tsx +++ b/packages/docs/src/routes/demo/integration/modular-forms/index.tsx @@ -1,22 +1,23 @@ // @ts-nocheck /* eslint-disable @typescript-eslint/no-unused-vars */ import { $, component$ } from '@builder.io/qwik'; -import { routeLoader$, z } from '@builder.io/qwik-city'; +import { routeLoader$ } from '@builder.io/qwik-city'; import type { InitialValues, SubmitHandler } from '@modular-forms/qwik'; -import { formAction$, useForm, zodForm$ } from '@modular-forms/qwik'; +import { formAction$, useForm, valiForm$ } from '@modular-forms/qwik'; +import { email, type Input, minLength, object, string } from 'valibot'; -const loginSchema = z.object({ - email: z - .string() - .min(1, 'Please enter your email.') - .email('The email address is badly formatted.'), - password: z - .string() - .min(1, 'Please enter your password.') - .min(8, 'You password must have 8 characters or more.'), +const LoginSchema = object({ + email: string([ + minLength(1, 'Please enter your email.'), + email('The email address is badly formatted.'), + ]), + password: string([ + minLength(1, 'Please enter your password.'), + minLength(8, 'Your password must have 8 characters or more.'), + ]), }); -type LoginForm = z.infer; +type LoginForm = Input; export const useFormLoader = routeLoader$>(() => ({ email: '', @@ -25,13 +26,13 @@ export const useFormLoader = routeLoader$>(() => ({ export const useFormAction = formAction$((values) => { // Runs on server -}, zodForm$(loginSchema)); +}, valiForm$(LoginSchema)); export default component$(() => { const [loginForm, { Form, Field }] = useForm({ loader: useFormLoader(), action: useFormAction(), - validate: zodForm$(loginSchema), + validate: valiForm$(LoginSchema), }); const handleSubmit: SubmitHandler = $((values, event) => { diff --git a/packages/docs/src/routes/devtools/json/index.tsx b/packages/docs/src/routes/devtools/json/index.tsx new file mode 100644 index 00000000000..01674b442a4 --- /dev/null +++ b/packages/docs/src/routes/devtools/json/index.tsx @@ -0,0 +1,9 @@ +import type { RequestHandler } from '@builder.io/qwik-city'; +import { devtoolsJsonSRC } from '@builder.io/qwik-labs'; + +export const onGet: RequestHandler = async ({ send, headers, cacheControl }) => { + headers.set('Content-Type', 'application/javascript'); + headers.set('Access-Control-Allow-Origin', '*'); + cacheControl('no-cache'); + send(200, devtoolsJsonSRC); +}; diff --git a/packages/docs/src/routes/docs/(qwik)/advanced/qrl/index.mdx b/packages/docs/src/routes/docs/(qwik)/advanced/qrl/index.mdx index 3378e7d3745..c75352cc53e 100644 --- a/packages/docs/src/routes/docs/(qwik)/advanced/qrl/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/advanced/qrl/index.mdx @@ -147,4 +147,4 @@ Because of the above differences, Qwik introduces QRLs as a mechanism for lazy l ## See Also -- `qrl`: API used to create QRLs. +- [`qrl`: API used to create QRLs.](https://qwik.builder.io/api/qwik/#qrl) diff --git a/packages/docs/src/routes/docs/(qwik)/components/events/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/events/index.mdx index 444573f096d..e12b7e5d1db 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/events/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/events/index.mdx @@ -144,14 +144,14 @@ import { component$ } from '@builder.io/qwik'; export default component$(() => { return ( { // event.PreventDefault() will not work here, because handler is dispatched asynchronously. alert('Do something else to simulate navigation...'); }} > - Go to about page + Go to docs page ); }); diff --git a/packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx index 93244842ee1..6a13e5326ca 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx @@ -221,7 +221,12 @@ In a microfrontends setup, where multiple fragments run concurrently, `useId()` ```tsx /const outputRef = useSignal();/ /ref={outputRef}/ -import { component$, useId, useSignal, useVisibleTask$ } from '@builder.io/qwik'; +import { + component$, + useId, + useSignal, + useVisibleTask$, +} from '@builder.io/qwik'; export default component$(() => { const elemIdSignal = useSignal(null); diff --git a/packages/docs/src/routes/docs/(qwik)/components/slots/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/slots/index.mdx index 5d68177ad38..5d90b36d853 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/slots/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/slots/index.mdx @@ -11,6 +11,7 @@ contributors: - lbensaad - gabrielgrant - mhevery + - jakovljevic-mladen --- import CodeSandbox from '../../../../../components/code-sandbox/index.tsx'; @@ -50,7 +51,7 @@ export default component$(() => { The `` component is a placeholder for the children of the component. The `` component will be replaced by the children of the component during rendering. > **Note**: Slots in Qwik are declarative, allowing Qwik to render parents and children in isolation. Because slots are declarative, the children can NOT be read, or transformed by the components. -> +> > Why? Because Qwik needs to be able to render parent/children components independently from each other. With an imperative (`children`) approach, the child component can modify the `children` in countless ways. If a child component relied on `children`, it would be forced to re-render whenever a parent component would re-render to reapply the imperative transformation to the `children`. The extra rendering goes explicitly against the goals of Qwik components rendering in isolation. @@ -216,7 +217,7 @@ The `Collapsible` component will always display the title, but the body of the t Additionally, the `title` and `description` of the projected content are editable. -- The parent component needs to be able to change content without forcing the `Collapsible` component to re-render. +- The parent component needs to be able to change content without forcing the `Collapsible` component to re-render. - The child component needs to change what is projected without having the parent component re-render. In our case, `Collapsible` should be able to show/hide the default `q:slot` without downloading and re-rendering the parent component. In order for the two components to have an independent lifecycle, the projection needs to be declarative. In this way, either the parent or child can change what is projected or how it is projected without forcing the re-rendering of the other. @@ -232,3 +233,5 @@ All frameworks need a way for a component to wrap its complex content conditiona The two approaches can best be described as declarative vs imperative. They both come with their set of advantages and disadvantages. Qwik uses the declarative projection approach. The reason for this is that Qwik needs to be able to render parent/children components independently from each other. With an imperative (`children`) approach, the child component can modify the `children` in countless ways. If a child component relied on `children`, it would be forced to re-render whenever a parent component would re-render to reapply the imperative transformation to the `children`. The extra rendering goes explicitly against the goals of Qwik components rendering in isolation. + +> **Note**: Due to Slots being declarative in Qwik, projection with `` will only work if the parent component is wrapped in `component$()`. If parent component is not wrapped in `component$()`, it is considered an [inline component](/docs/components/overview/#inline-components) and `` will not work. diff --git a/packages/docs/src/routes/docs/(qwik)/components/state/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/state/index.mdx index 26535ac3efb..4ac82ca74b5 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/state/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/state/index.mdx @@ -26,6 +26,7 @@ contributors: - AnthonyPAlicea - sreeisalso - wmertens + - nicvazquez --- import CodeSandbox from '../../../../../components/code-sandbox/index.tsx'; @@ -123,8 +124,8 @@ export default component$(() => { Add to list
    - {store.list.map((item) => ( -
  • {item}
    • + {store.list.map((item, index) => ( +
  • {item}
    • ))}
diff --git a/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx b/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx index 536d196e433..a0bc1e9c4d8 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/tasks/index.mdx @@ -63,7 +63,7 @@ Thanks to [Resumability](/docs/(qwik)/concepts/resumable/index.mdx), component l **BROWSER**: Sometimes a component will be first mounted/rendered in the browser, for example when the user SPA navigates to a new page, or a "modal" component first appears in the page. In that case, the lifecycle will run like this: -```bash /useTask$/#d /RENDER/#b /useVisibleTask$/#c +```bash useTask$ --> RENDER --> useVisibleTask$ | -------------- BROWSER --------------- | @@ -83,7 +83,7 @@ Additionally, this task can be reactive and will re-execute when **tracked** [st **Notice that any subsequent re-execution of the task will always happen in the browser**, because reactivity is a browser-only thing. -```bash /useTask$(track)/#d /RENDER/#b /CLICK/#a +```bash (state change) -> (re-execute) ^ | | v @@ -144,7 +144,7 @@ Use `useTask$()` when you need to: ### On mount -There is not an specific "on-mount" hook in Qwik because `useTask$()` without tracking effectively behaves like a `mount` hook. +Qwik does not have a specific "on-mount" hook because useTask$() without track() effectively behaves like a mount hook. This is because `useTask$` runs always at least once when the component is first mounted. diff --git a/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx b/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx index d95b6507379..7df37a09331 100644 --- a/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/getting-started/index.mdx @@ -546,7 +546,7 @@ Congratulations! You've learned a lot about Qwik! For more on just how much you can achieve with Qwik, we recommend reading the dedicated docs on each of the topics touched on in this tutorial: - [Project structure](/docs/(qwikcity)/project-structure/index.mdx) -- [Directory-based](/docs/(qwikcity)/routing/index.mdx) routing +- [Directory-based routing](/docs/(qwikcity)/routing/index.mdx#directory-based-routing) - [Component](/docs/(qwik)/components/overview/index.mdx) - [Route loaders](/docs/(qwikcity)/route-loader/index.mdx) - [Form actions](/docs/(qwikcity)/action/index.mdx) && [zod validation](/docs/(qwikcity)/action/index.mdx#zod-validation) diff --git a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx index 8e798bf9222..d2c3b7ba71d 100644 --- a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx +++ b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx @@ -372,7 +372,7 @@ export default component$(() => { }); ``` -The `action.formData` is specially useful as it allows to keep the form data filled by the user even on a page refresh, allowing to have a full SPA experience, even with JS disabled. +The `action.formData` is especially useful as it allows to keep the form data filled by the user even on a page refresh, allowing to have a full SPA experience, even with JS disabled. ## Route vs Global actions diff --git a/packages/docs/src/routes/docs/(qwikcity)/advanced/routing/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/advanced/routing/index.mdx index 06403ab637e..3c8eb571e29 100644 --- a/packages/docs/src/routes/docs/(qwikcity)/advanced/routing/index.mdx +++ b/packages/docs/src/routes/docs/(qwikcity)/advanced/routing/index.mdx @@ -5,6 +5,7 @@ contributors: - cunzaizhuyi - the-r3aper7 - mhevery + - jakovljevic-mladen --- # Advanced Routing @@ -125,13 +126,15 @@ At times related routes need to have drastically different layouts from their si Qwik City defines the convention that layouts are within `src/routes` and the filename starts with `layout`. That's why the default layout is named `layout.tsx`. A named layout also starts with `layout` followed by a dash `-` and a unique name, such as `layout-narrow.tsx`. +To reference a named layout, the route's `index.tsx` file must be suffixed with `@`. For example, `index@narrow.tsx` would use the `layout-narrow.tsx` layout. + ```bash src/ └── routes/ ├── contact/ │ └── index@narrow.tsx # https://example.com/contact (Layout: layout-narrow.tsx) ├── layout.tsx # Default layout - ├── layout-narrow.tsx # Default named layout + ├── layout-narrow.tsx # Named layout └── index.tsx # https://example.com/ (Layout: layout.tsx) ``` @@ -243,3 +246,10 @@ You can have multiple `plugin.ts` files, each with a different name. For example Requests handlers like `onRequest`, `onGet`, `onPost`, etc. are called before `server$` functions are executed. +### The order of execution of `plugin.ts` files + + If `plugin.ts` file exists and if it has exported request handlers, then they are executed first. + +Then exported request handlers from `plugin@.ts` files are executed in alphabetical order of the file names. For example, `onGet` from `plugin@auth.ts` is executed before `onGet` from `plugin@security.ts` because `auth` is alphabetically before `security`. + +Finally, if a `server$` function exists, it's executed last. diff --git a/packages/docs/src/routes/docs/(qwikcity)/api/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/api/index.mdx index e5515d87d4c..705fd1c2551 100644 --- a/packages/docs/src/routes/docs/(qwikcity)/api/index.mdx +++ b/packages/docs/src/routes/docs/(qwikcity)/api/index.mdx @@ -270,7 +270,7 @@ export default component$(() => { ## `` -The `RouterOutlet` component is responsible for rendering the matched route at a given moment, it uses internally the [`useContent()`](/docs/(qwikcity)/api/index.mdx#usecontent) and to render the current page, as well as all the nested layouts. +The `RouterOutlet` component is responsible for rendering the matched route at a given moment, it uses internally the [`useContent()`](/docs/(qwikcity)/api/index.mdx#usecontent) to render the current page, as well as all the nested layouts. This component is usually located as a child of ``, in most of the starters you will find it in the `src/root.tsx` file (refer to the example in `QwikCityProvider`). @@ -278,7 +278,7 @@ This component is usually located as a child of ``, in most of the starter The `Form` component is a wrapper around the native `
` element, and it's designed to work side by side with [Server Actions](/docs/(qwikcity)/action/index.mdx#using-actions-with-form). -Since this component uses the native `` element, it will work with any browser with and without JavaScript enabled, in addition, it enhances the native `` element by capturing the `submit` event and preventing the default behavior, so it will behave like a SPA (Single Page Navigation) instead of a full page reload. +Since this component uses the native `` element, it will work with any browser with and without JavaScript enabled, in addition, it enhances the native `` element by capturing the `submit` event and preventing the default behavior, so it will behave like an SPA (Single Page Application) instead of a full page reload. ```tsx title="src/routes/login/index.tsx" import { component$ } from '@builder.io/qwik'; diff --git a/packages/docs/src/routes/docs/(qwikcity)/caching/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/caching/index.mdx index 6ede56dd3fb..322cc5908d2 100644 --- a/packages/docs/src/routes/docs/(qwikcity)/caching/index.mdx +++ b/packages/docs/src/routes/docs/(qwikcity)/caching/index.mdx @@ -76,7 +76,7 @@ You can see the full [API reference](https://qwik.builder.io/api/qwik-city-middl ## When not to cache -Caching is a good default, but not right for every page all the time. If you have URLs on your site that will show different content to different people - such as pages only for logged in users, or pages that show different content based on the user's location, you should not cache those pages using cache-control headers in the response, and server side render the contents of those pages on a per-visitor basis. +Caching is a good default, but not right for every page all the time. If you have URLs on your site that will show different content to different people - such as pages only for logged in users, or pages that show different content based on the user's location, you should not cache those pages using cache-control headers in the response, and on server side render the contents of those pages on a per-visitor basis. For high traffic pages that look the same to everyone, such as a homepage, caching is the best thing to do for performance and cost. But for pages only for logged in users, and as a result probably have some degree less traffic, disabling caching may be wise. diff --git a/packages/docs/src/routes/docs/(qwikcity)/endpoints/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/endpoints/index.mdx index 6299e6f1c7a..accf3cd8269 100644 --- a/packages/docs/src/routes/docs/(qwikcity)/endpoints/index.mdx +++ b/packages/docs/src/routes/docs/(qwikcity)/endpoints/index.mdx @@ -84,5 +84,5 @@ const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); Endpoints are low level APIs that give developers full control over the HTTP response. They are only recommended when you need to create an API to be consumed by an external entity such as a mobile app or a third-party service. -The [`server$`](/docs/(qwikcity)/server$/index.mdx) functions are usually a better option when you need to run some code on the server and return a response back to the app. The `server$` are strongly typed and provides a more convenient API for returning data. +The [`server$`](/docs/(qwikcity)/server$/index.mdx) functions are usually a better option when you need to run some code on the server and return a response back to the app. The `server$` is strongly typed and provides a more convenient API for returning data. diff --git a/packages/docs/src/routes/docs/(qwikcity)/guides/bundle/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/guides/bundle/index.mdx index 945557f0dd4..1a6820ef161 100644 --- a/packages/docs/src/routes/docs/(qwikcity)/guides/bundle/index.mdx +++ b/packages/docs/src/routes/docs/(qwikcity)/guides/bundle/index.mdx @@ -50,7 +50,7 @@ export const s_ABC123 = () => { }; export const s_XYZ432 = () => { - const [count] = useLexicalScop(); + const [count] = useLexicalScope(); return count.value++; } ``` diff --git a/packages/docs/src/routes/docs/(qwikcity)/guides/mdx/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/guides/mdx/index.mdx index 3b75ebecdb7..1deb89b23cf 100644 --- a/packages/docs/src/routes/docs/(qwikcity)/guides/mdx/index.mdx +++ b/packages/docs/src/routes/docs/(qwikcity)/guides/mdx/index.mdx @@ -169,21 +169,21 @@ This is a simple hello world component. ``` ```tsx title="src/components/tags/tags.tsx" -import { component$, useSignal } from '@builder.io/qwik'; +import { component$ } from '@builder.io/qwik'; import { useDocumentHead } from '@builder.io/qwik-city'; export const Tags = component$(() => { const { frontmatter } = useDocumentHead(); if (frontmatter.tags.length === 0) { - return; + return null; } return (
    {frontmatter.tags.map((tag: string) => (
  • {tag}
    • - )} + ))}
); }); diff --git a/packages/docs/src/routes/docs/(qwikcity)/guides/qwik-nutshell/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/guides/qwik-nutshell/index.mdx index 4596035f2ec..d9dc6382444 100644 --- a/packages/docs/src/routes/docs/(qwikcity)/guides/qwik-nutshell/index.mdx +++ b/packages/docs/src/routes/docs/(qwikcity)/guides/qwik-nutshell/index.mdx @@ -55,7 +55,7 @@ export const MyComponent = component$((props: MyComponentProps) => {

Count: {count.value}

@@ -166,7 +166,7 @@ Methods that start with `use` are special in Qwik, such as `useSignal()`, `useSt ## Styling -Qwik supports out of the box, CSS modules, or even tailwind, global CSS imports and lazy loading scoped CSS using `useStyleScoped$()`. CSS Modules are the recommended way to style Qwik components. +Qwik supports out of the box, CSS modules, or even Tailwind, global CSS imports and lazy loading scoped CSS using `useStylesScoped$()`. CSS Modules are the recommended way to style Qwik components. ### CSS Modules @@ -195,7 +195,7 @@ Remember that Qwik uses `class` instead of `className` for CSS classes. The `$(...)` function and any function that end with `$` are special in Qwik, such as: `$()`, `useTask$()`, `useVisibleTask$()`... The `$` at the end represents a lazy loading boundary. There are some rules that apply to the first argument of any `$` function. It is NOT related to jQuery at all. -- The first argument must be a imported variable. +- The first argument must be an imported variable. - The first argument must be a declared variable at the top level of the same module. - The first argument must be an expression any variables. - If the first argument is a function, it can only capture variables that are declared at the top level of the same module or which value is serializable. Serializable values include: `string`, `number`, `boolean`, `null`, `undefined`, `Array`, `Object`, `Date`, `RegExp`, `Map`, `Set`, `BigInt`, `Promise`, `Error`, `JSX nodes`, `Signal`, `Store` and even HTMLElements. @@ -215,10 +215,10 @@ export default component$(() => { console.log('input', event.target.name, event.target.value); }); - // The first argument is a imported identifier. + // The first argument is an imported identifier. const valid2 = $(importedFunction); - // The first argument is a identifier declared at the top level of the same module. + // The first argument is an identifier declared at the top level of the same module. const valid3 = $(exportedFunction); // The first argument is an expression without local variables. @@ -275,7 +275,7 @@ export interface Signal { export const useSignal: (value?: T | (() => T)): Signal; ``` -`useSignal(initialValue?)` takes an optional initial value and returns a `Signal` object. The `Signal` object has a `value` property that can be read and written to. When a component or task access the `value` property, it automatically creates a subscription, so when the `value` is changed, every component, task or another computed signals that read the `value` will be re-evaluated. +`useSignal(initialValue?)` takes an optional initial value and returns a `Signal` object. The `Signal` object has a `value` property that can be read and written to. When a component or task accesses the `value` property, it automatically creates a subscription, so when the `value` is changed, every component, task or another computed signals that read the `value` will be re-evaluated. ### `useStore(initialValue?)` @@ -340,7 +340,7 @@ export const Counter = component$(() => { ### `useTask$(() => { ... })` -`useTask$` is used to create an async task. Tasks are useful to implement side effects, running heavy computation and async code as part of the rendering lifecycle. `useTask$` tasks are executed before the first render, and susequently whenever a tracked signal or store changes, the task is re-executed. +`useTask$` is used to create an async task. Tasks are useful to implement side effects, running heavy computation and async code as part of the rendering lifecycle. `useTask$` tasks are executed before the first render, and subsequently whenever a tracked signal or store changes, the task is re-executed. ```tsx import { component$, useSignal, useTask$ } from '@builder.io/qwik'; @@ -391,7 +391,7 @@ export const Counter = component$(() => { ### `useVisibleTask$(() => { ... })` -`useVisibleTask$` is used to create a task that happens right AFTER the component is first mounted in the DOM. It's similar to `useTask$` except that it only runs on the client, and it's executed after the first render. Because it's executed after the render, it's ok to inspect the DOM, or use browser APIS. +`useVisibleTask$` is used to create a task that happens right AFTER the component is first mounted in the DOM. It's similar to `useTask$` except that it only runs on the client, and it's executed after the first render. Because it's executed after the render, it's ok to inspect the DOM, or use browser APIs. ```tsx import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'; @@ -399,7 +399,7 @@ import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik'; export const Clock = component$(() => { const time = useSignal(0); - // The `useVisibleTask$` hook is used to create a task that runs eagarly on the client. + // The `useVisibleTask$` hook is used to create a task that runs eagerly on the client. useVisibleTask$((taskContext) => { // Since this VisibleTask is not tracking any signals, it will only run once. @@ -420,7 +420,7 @@ export const Clock = component$(() => { }); ``` -Since Qwik does NOT execute any Javascript on the browser before user interaction, `useVisibleTask$()` is the only API that will run execute eagerly on the client, which is why it's a good place to do things like: +Since Qwik does NOT execute any Javascript on the browser before user interaction, `useVisibleTask$()` is the only API that will run eagerly on the client, which is why it's a good place to do things like: - Access DOM APIs - Initialize browser-only libraries @@ -500,7 +500,7 @@ export default component$(() => { ## Fetching / loading data -The recommended way to load data from the server is to use the `routeLoader$()` function exported from `@builder.io/qwik-city`. The `routeLoader$()` function is used to create a data loader that will be executed on the server before the route is rendered. The return of `routeLoader$()` must exported as a name export from the route file, ie, it can only be used in a `index.tsx`, inside of `src/routes/`. +The recommended way to load data from the server is to use the `routeLoader$()` function exported from `@builder.io/qwik-city`. The `routeLoader$()` function is used to create a data loader that will be executed on the server before the route is rendered. The return of `routeLoader$()` must be exported as a named export from the route file, ie, it can only be used in a `index.tsx`, inside of `src/routes/`. ```tsx title="src/routes/user/[userID]/index.tsx" @@ -572,7 +572,7 @@ export const useUserUpdate = routeAction$(async (data, requestContext) => { })); export default component$(() => { - // The `useUserUpdate` hook will return a `ActionStore` containing the `value` returned from `routeAction$()`, and some other properties, such as `submit()`, which is used to submit the form programmatically, and `isRunning`. All of these properties are reactive, and will re-render the component whenever they change. + // The `useUserUpdate` hook will return an `ActionStore` containing the `value` returned from `routeAction$()`, and some other properties, such as `submit()`, which is used to submit the form programmatically, and `isRunning`. All of these properties are reactive, and will re-render the component whenever they change. const userData = useUserUpdate(); // userData.value is the value returned from `routeAction$()`, which is `undefined` before the form is submitted. // userData.formData is the form data that was submitted, it is `undefined` before the form is submitted. @@ -612,9 +612,9 @@ import { isBrowser } from '@builder.io/qwik/build'; export default component$(() => { const ref = useSignal(); - // useVisibleTask$ will only run on the browser + // useVisibleTask$ will only run in the browser useVisibleTask$(() => { - // No need to check for `isBrowser` before accessing the DOM, because useVisibleTask$ will only run on the browser + // No need to check for `isBrowser` before accessing the DOM, because useVisibleTask$ will only run in the browser ref.value?.focus(); document.title = 'Hello world'; }); @@ -653,7 +653,7 @@ JSX handlers such as `onClick$` and `onInput$` are only executed on the client. ### `isBrowser` conditional -Qwik provides a `isBrowser` boolean exported from `@builder.io/qwik/build`. You can use this to ensure that code only runs on the browser. +Qwik provides an `isBrowser` boolean exported from `@builder.io/qwik/build`. You can use this to ensure that code only runs in the browser. ## Run code only on the server @@ -672,7 +672,7 @@ export const useGetProducts = routeLoader$((requestEvent) => { return product; }) -const encryptInServer = server$(function(message: string) { +const encryptOnServer = server$(function(message: string) { // `this` is the `requestEvent const secretKey = this.env.get('SECRET_KEY'); const encryptedMessage = encrypt(message, secretKey); @@ -699,7 +699,7 @@ export default component$(() => { - + ); }); -export const AttributesChild = component$(() => { +export const AttributesChild = component$<{ v: number }>(({ v }) => { const renders = useStore( { count: 0, @@ -157,6 +161,7 @@ export const AttributesChild = component$(() => { +
Render {v}
); }); @@ -181,6 +186,7 @@ export const Issue4718Undefined = component$(() => { data-works={signal.value} aria-label={signal.value} title={signal.value} + class={!signal.value && "moop"} onClick$={() => { signal.value = undefined; }} @@ -199,6 +205,7 @@ export const Issue4718Null = component$(() => { data-works={signal.value as any} aria-label={signal.value as any} title={signal.value as any} + class={!signal.value && "moop"} onClick$={() => { signal.value = null; }} diff --git a/starters/apps/e2e/src/components/context/context.tsx b/starters/apps/e2e/src/components/context/context.tsx index bffa103961b..1e4b34f83a5 100644 --- a/starters/apps/e2e/src/components/context/context.tsx +++ b/starters/apps/e2e/src/components/context/context.tsx @@ -72,12 +72,14 @@ export const ContextFromSlot = component$(() => { // This code will not work because its async before reading subs export const Level2 = component$(() => { const level2State1 = useStore({ displayName: "Level2 / state1", count: 0 }); + // read context1 before changing it + const state1 = useContext(Context1); + // change context1 useContextProvider(Context1, level2State1); const state3 = useStore({ displayName: "Level2 / state3", count: 0 }); useContextProvider(Context3, state3); - const state1 = useContext(Context1); const state2 = useContext(Context2); const stateSlot = useContext(ContextSlot); diff --git a/starters/apps/e2e/src/components/render/render.tsx b/starters/apps/e2e/src/components/render/render.tsx index 7880f51c83a..770d347ea0d 100644 --- a/starters/apps/e2e/src/components/render/render.tsx +++ b/starters/apps/e2e/src/components/render/render.tsx @@ -22,14 +22,18 @@ export const Render = component$(() => { const rerender = useSignal(0); return ( <> - - + ); }); -export const RenderChildren = component$(() => { +export const RenderChildren = component$<{ v: number }>(({ v }) => { const parent = { counter: { count: 0, @@ -42,6 +46,7 @@ export const RenderChildren = component$(() => { const state = useStore(parent, { deep: true }); return ( <> +
Render {v}
+ {show.value && } + + ); +}); diff --git a/starters/apps/e2e/src/components/slot/slot.tsx b/starters/apps/e2e/src/components/slot/slot.tsx index 8c0955a84ff..1701133f7a7 100644 --- a/starters/apps/e2e/src/components/slot/slot.tsx +++ b/starters/apps/e2e/src/components/slot/slot.tsx @@ -25,6 +25,7 @@ export const SlotParent = component$(() => {
{state.render && ( <> +
Hi
Component Slot Content diff --git a/starters/apps/e2e/src/components/streaming/streaming.tsx b/starters/apps/e2e/src/components/streaming/streaming.tsx index 8dea00f4db9..e82a5a79345 100644 --- a/starters/apps/e2e/src/components/streaming/streaming.tsx +++ b/starters/apps/e2e/src/components/streaming/streaming.tsx @@ -21,7 +21,7 @@ export const StreamingRoot = component$(() => { return ( <> @@ -35,7 +35,7 @@ export const Streaming = component$(() => { return (
    diff --git a/starters/apps/e2e/src/components/styles/styles.tsx b/starters/apps/e2e/src/components/styles/styles.tsx index 0530b4f1558..5c64ece4608 100644 --- a/starters/apps/e2e/src/components/styles/styles.tsx +++ b/starters/apps/e2e/src/components/styles/styles.tsx @@ -16,15 +16,15 @@ export const Styles = component$(() => { const reload = useSignal(0); return ( <> - - + ); }); -export const StylesChildren = component$(() => { +export const StylesChildren = component$<{ v: number }>(({ v }) => { useStylesScoped$(parent); useStylesScoped$(parent2); @@ -33,6 +33,7 @@ export const StylesChildren = component$(() => { }); return (
    +
    Render {v}
    Parent