diff --git a/.changeset/lazy-worms-attack.md b/.changeset/lazy-worms-attack.md new file mode 100644 index 00000000000..de866e201c0 --- /dev/null +++ b/.changeset/lazy-worms-attack.md @@ -0,0 +1,5 @@ +--- +'@builder.io/qwik-city': patch +--- + +MDX content no longer ignores Layout components. See [the MDX docs](https://mdxjs.com/docs/using-mdx/#layout) for more information. diff --git a/.changeset/many-turtles-cough.md b/.changeset/many-turtles-cough.md new file mode 100644 index 00000000000..18c13ce2ac6 --- /dev/null +++ b/.changeset/many-turtles-cough.md @@ -0,0 +1,5 @@ +--- +'@builder.io/qwik-city': patch +--- + +Fix action redirect regression where searchParams were appended diff --git a/.changeset/ninety-planets-search.md b/.changeset/ninety-planets-search.md new file mode 100644 index 00000000000..77a35dd0e1a --- /dev/null +++ b/.changeset/ninety-planets-search.md @@ -0,0 +1,6 @@ +--- +'@builder.io/qwik-city': patch +'@builder.io/qwik': patch +--- + +FIX: `vite` is now a peer dependency of `qwik` and `qwik-city`, so that there can be no duplicate imports. This should not have consequences, since all apps also directly depend on `vite`. diff --git a/.changeset/real-garlics-argue.md b/.changeset/real-garlics-argue.md new file mode 100644 index 00000000000..45032734e77 --- /dev/null +++ b/.changeset/real-garlics-argue.md @@ -0,0 +1,5 @@ +--- +'@builder.io/qwik-city': patch +--- + +Fixed MDX layout default export being ignored by transformer. diff --git a/.changeset/shaggy-apes-kneel.md b/.changeset/shaggy-apes-kneel.md new file mode 100644 index 00000000000..3330fd795e9 --- /dev/null +++ b/.changeset/shaggy-apes-kneel.md @@ -0,0 +1,5 @@ +--- +'@builder.io/qwik': patch +--- + +sync$ QRLs will now be serialized into the HTML in a shorter form diff --git a/.changeset/silver-countries-kiss.md b/.changeset/silver-countries-kiss.md index 4c9e7524e0e..e83044e5f1b 100644 --- a/.changeset/silver-countries-kiss.md +++ b/.changeset/silver-countries-kiss.md @@ -1,5 +1,5 @@ --- -'@builder.io/qwik-city': minor +'@builder.io/qwik-city': patch --- Prevent unexpected caching for q-data.json diff --git a/.changeset/thick-dodos-promise.md b/.changeset/thick-dodos-promise.md new file mode 100644 index 00000000000..053ae8f368e --- /dev/null +++ b/.changeset/thick-dodos-promise.md @@ -0,0 +1,5 @@ +--- +'@builder.io/qwik': patch +--- + +FIX: cli build command appearing to "hang" on errors diff --git a/.changeset/unlucky-experts-check.md b/.changeset/unlucky-experts-check.md new file mode 100644 index 00000000000..1c6950a3b69 --- /dev/null +++ b/.changeset/unlucky-experts-check.md @@ -0,0 +1,5 @@ +--- +'@builder.io/qwik': patch +--- + +Allow setting `linkFetchPriority` for modulepreload links in the prefetch strategy. Also fix the links in dev mode diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 48c98d64508..b17f416e418 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -8,14 +8,21 @@ b) Framework functionality achievable only by the core. If this PR can be done as a 3rd-Party Community Add-On, we encourage that for quicker adoption. If you believe your functionality is valuable to the entire Qwik Community, discuss it in the Qwik Discord channels for potential inclusion in the core. + +First of all, make sure your PR title is descriptive and matches our commit title guidelines. + +Also make sure your PR follows all the guidelines in the [CONTRIBUTING.md](./CONTRIBUTING.md) document. + --> # What is it? -- [ ] Feature / enhancement -- [ ] Bug -- [ ] Docs / tests / types / typos -- [ ] Infra + + +- Feature / enhancement +- Bug +- Docs / tests / types / typos +- Infra # Description @@ -24,10 +31,15 @@ If you believe your functionality is valuable to the entire Qwik Community, disc * Is it related to any opened issues? (please add them here) --> -# Checklist: +# Checklist + + - [ ] My code follows the [developer guidelines of this project](https://github.com/QwikDev/qwik/blob/main/CONTRIBUTING.md) -- [ ] I have performed a self-review of my own code -- [ ] I have ran `pnpm change` and documented my changes -- [ ] I have made corresponding changes to the Qwik docs -- [ ] Added new tests to cover the fix / functionality +- [ ] I performed a self-review of my own code +- [ ] I added a changeset with `pnpm change` +- [ ] I made corresponding changes to the Qwik docs +- [ ] I added new tests to cover the fix / functionality diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4965f05a6e8..1af23828648 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -64,13 +64,26 @@ This is the best approach because all required dependencies will be installed in You need to have these tools up and running in your local machine: -- [VSCode](https://code.visualstudio.com/) +- an editor. We recommend [VSCode](https://code.visualstudio.com/). +- one of the following: + - [Nix](https://nixos.org) + - [Docker](https://www.docker.com/) + - Locally installed NodeJS v18+ and optionally Rust -and either [Docker](https://www.docker.com/) or [Nix](https://nixos.org). +#### Nix -### Steps +[Nix](https://nixos.org/download.html) can be used on macOS and Linux. It keeps installation files in `/nix` and doesn't write anywhere else. It has a declarative configuration in the `flake.nix` file, which describes all the tools needed to build the project. -If you want to use Docker: +- Install it on your machine and enable flakes. The [DetSys installer](https://github.com/DeterminateSystems/nix-installer) makes that easy. +- run `nix develop` in the project root to open a shell with all the tools, or use `direnv` to have them automatically added into your current shell. + +##### Nix + Direnv (optional) + +You can additionally use [direnv](https://direnv.net/) to automatically load the dev environment when you enter the project directory. +There is also a VSCode plugin for direnv that reloads the extensions so they get environment changes. +When you install direnv, you'll need to allow it once with `direnv allow` in the project root. From then on, when you `cd` into the project, it will automatically have the correct tools installed. + +#### Docker - Install the [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension in your VSCode. - Once installed you will be prompted to 'Reopen the folder to develop in a container [learn more](https://code.visualstudio.com/docs/devcontainers/containers) or Clone repository in Docker volume for [better I/O performance](https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-a-git-repository-or-github-pr-in-an-isolated-container-volume)'. If you're not prompted, you can run the `Dev Containers: Open Folder in Container` command from the [VSCode Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette). @@ -81,16 +94,7 @@ Alternatively you can use [devcontainers/cli](https://github.com/devcontainers/c - In your terminal navigate to the Qwik's project root directory. - Then run `devcontainer up --workspace-folder .`. This command will start a Docker container with all required environment dependencies. -If you want to use Nix: - -- Install [Nix](https://nixos.org/download.html) on your machine and enable flakes. The [DetSys installer](https://github.com/DeterminateSystems/nix-installer) makes that easy. -- run `nix develop` in the project root. - -Nix+Direnv (optional): - -You can additionally use [direnv](https://direnv.net/) to automatically load the dev environment when you enter the project directory. - -### Using development container without Dev Containers and VSCode +##### Using development container without Dev Containers and VSCode If you would like to make use of the development container solution, but don't use VSCode or Dev Containers, you still can do so, by following steps: @@ -105,7 +109,7 @@ Docker command does: - That exposes the ports `3300` and `9229`, and - Binds `qwik` project directory to container working directory. -### Podman extras +##### Podman extras > This section is highly influenced by SO answer: https://serverfault.com/a/1075838/352338 > If you use [Podman](https://podman.io/) instead of Docker as your containers engine, then you need to know the following: @@ -132,13 +136,11 @@ $ podman run --rm \ -t qwik-container ``` -## Alternative way - -If you're not able to use the dev container, follow these instructions: +#### Locally installed tools -### Installation +If you're not able to use the dev container, make sure you have NodeJS v18+ installed, as well as `pnpm`. -> These are for a full build that includes Rust binaries. +Furthermore, to build the optimizer you optionally need Rust. 1. Make sure [Rust](https://www.rust-lang.org/tools/install) is installed. 2. Install [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/) with `cargo install wasm-pack` . @@ -149,21 +151,21 @@ If you're not able to use the dev container, follow these instructions: > On Windows, Rust requires [C++ build tools](https://visualstudio.microsoft.com/visual-cpp-build-tools/). You can also select _Desktop development with C++_ > while installing Visual Studio. -> Alternatively, if Rust is not available you can run `pnpm build.platform.copy` to download bindings from CDN - --- ## Development -To build Qwik for local development, install the dev dependencies using [pnpm](https://pnpm.io/) and then do an initial build: +To build Qwik for local development, install the dev dependencies using [pnpm](https://pnpm.io/) and then do an initial build. ```shell pnpm install && pnpm build.local ``` +If you want to work on the Rust code, use `build.full` instead of `build.local`. + ### Fast build -It will build only Qwik and Qwik City. +This will build only Qwik and Qwik City and their types. This is not enough to run the docs. ```shell pnpm build.core @@ -171,30 +173,35 @@ pnpm build.core ### Custom build -E.g. to build only the react integration: +Once you have done a full build, the types are built, and you can build just the code you're working on. For qwik and qwik-city, you can do very fast rebuilds with ```shell -pnpm build --qwikreact +pnpm build --dev --qwik --qwikcity ``` -Run without arguments for all supported flags. Notable: +The `--dev` flag skips type checking and generating. + +You can run `pnpm build` without parameters to see which flags are available. Notable: -- `--tsm`: typecheck -- `--build`: Qwik (you'll probably also need `--api`) -- `--qwikcity`: Qwik City (you'll probably also need `--api`) +- `--tsc`: build types +- `--api`: build API docs and type bundles. Requires `--tsc` to have run. +- `--build`: Qwik (you'll probably also need `--dev`) +- `--qwikcity`: Qwik City (you'll probably also need `--dev`) - `--qwikreact`: Qwik React - `--qwiklabs`: Qwik Labs - `--eslint`: Eslint plugin +E.g. to build only the React integration, you'd run `pnpm build --qwikreact`. + ### Full build without Rust -It will build everything except Rust prerequisites and the optimizer binaries. +This builds everything except Rust prerequisites and the optimizer binaries. Instead, those binaries are copied from the latest Qwik package on NPM. ```shell pnpm build.local ``` -### Full build +### Full build with Rust It will build **everything**, including Rust packages and WASM. @@ -212,68 +219,33 @@ pnpm build.full The build output will be written to `packages/qwik/dist`, which will be the directory that is published to [@builder.io/qwik](https://www.npmjs.com/package/@builder.io/qwik). -### Run in your own app: - -Say you made changes to the repo. After you finished you'd need to run the build command (`pnpm build.full`/`pnpm build`). - -To use your build in your project, follow these steps: - -1. Inside the root of the `qwik` project run: - - ```shell - pnpm link.dist - ``` - - or - - ```shell - pnpm link.dist.npm - ``` +To update the Rust test snapshots after you've made changes to the Rust code, run `pnpm test.rust.update`. - or +### Run in your own app - ```shell - pnpm link.dist.yarn - ``` +Say you made changes to the repo and you want to try them out in your app. Once built, all the Qwik packages are directly usable in your project by using the linking in your package manager. -2. Inside the root of your project run: +This is very easy to do with `pnpm`: +Assuming qwik is in `../qwik`, run this inside the root of your app: - ```shell - pnpm install - pnpm link --global @builder.io/qwik @builder.io/qwik-city - ``` - - or - - ```shell - npm install - npm link @builder.io/qwik @builder.io/qwik-city - ``` - - or - - ```shell - yarn install - yarn link @builder.io/qwik @builder.io/qwik-city - ``` - -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. +```shell +pnpm link ../qwik/packages/qwik +pnpm link ../qwik/packages/qwik-city +``` -### Test against the docs site: +Other package managers probably need to first be told about the packages. For example, with `bun` you need to `cd ../qwik/packages/qwik` and `bun link`, repeat for `qwik-city`. Then in your app run `bun link @builder.io/qwik @builder.io/qwik-city`. -1. At the root of the Qwik repo folder run: +If you can't use package linking, just copy the contents of `packages/qwik` into your projects' `node_modules/@builder.io/qwik` folder, and/or the contents of `packages/qwik-city` into your projects' `node_modules/@builder.io/qwik-city` folder. -```shell -pnpm install -``` +### Working on the docs site -2. Run the docs site: +At the root of the Qwik repo folder run: ```shell pnpm docs.dev ``` -### To open the test apps for debugging run: +### To open the test apps for debugging run ```shell pnpm serve @@ -313,21 +285,69 @@ To update all dependencies, run: pnpm deps ``` -This will show an interactive UI to update all dependencies. Be careful about performing major updates, especially for the docs site, since not all functionality has test coverage there. +This will show an interactive UI to update all dependencies. Be careful about performing major updates, especially for the docs site, since not all functionality has test coverage there. Be sure to test thoroughly. ## Starter CLI `create-qwik` - [Starter CLI](https://github.com/QwikDev/qwik/blob/main/starters/README.md) -## Pull Request +## Pull Requests - [Open Qwik in StackBlitz Codeflow](https://pr.new/github.com/QwikDev/qwik/) - Review PR in StackBlitz ![image](https://user-images.githubusercontent.com/4918140/195581745-8dfca1f9-2dcd-4f6a-b7aa-705f3627f8fa.png) -### Adding a changeset: +### Coding conventions + +Write code that is clean, simple and easy to understand. Complicated one-liners are generally frowned upon, unless they are for performance reasons and are clearly marked as such with a comment and explanation. + +When code does something unexpected, add a comment explaining why. + +When a comment is longer, prefer using `/** */` JSDoc comments as that will be auto-formatted as Markdown. +JSDoc comments will also become part of the API documentation when they apply to exports, so write them as such. + +`pnpm fmt` is your friend, and we recommend setting up Prettier and using format-on-save in your editor. + +### Commit conventions + +If you don't follow these commit conventions, your PR will be squashed. This means your local branch will not be part of the commit history of the target branch. +For larger PRs, it would really help if you follow these guidelines. + +- Create a commit for each logical unit and make sure it passes linting. +- Keep your commits focused and atomic. Each commit should represent a single, coherent change. +- If you have commits like `wip lol` or `fixup`, squash them. Use `git rebase -i`. +- Commits must follow the format: `type(scope): description` + For example: `feat(qwik-city): confetti animations` or `chore: pnpm api.update` + + Common types include: + + - feat: A new feature + - fix: A bug fix + - docs: Documentation only changes + - lint: Changes that do not affect the meaning of the code (white-space, formatting, etc) + - refactor: A code change that neither fixes a bug nor adds a feature + - perf: A code change that improves performance + - test: Adding missing tests or correcting existing tests + - chore: Changes to the build process or auxiliary tools and libraries such as documentation generation + + The `scope` is optional and should be a short identifier for the changed part of the code. -Whenever you make a change that requires documentation or a new release, you should add a changeset. This will help us to keep track of changes and generate meaningful release notes and changelog files. +- Use the imperative mood in the description. For example, use "add" instead of "added" or "adds". +- For consistency, there should not be a period at the end of the commit message's summary line (the first line of the commit message). + +### Writing good commit messages + +In addition to writing properly formatted commit messages, it's important to include relevant information so other developers can later understand _why_ a change was made. While this information usually can be found by digging into the code, pull request discussions or upstream changes, it may require a lot of work. + +- Be clear and concise in your commit messages. +- Explain the reason for the change, not just what was changed. +- If the commit fixes a specific issue, reference it in the commit message (e.g., "Fixes #123"). + +### Adding a changeset + +Whenever you make a change that requires mentioning in the changelog, you should add a changeset. This will automatically generate meaningful release notes and changelog files. + +You can add multiple changesets in a PR, for example because you implement different features for different packages, or because you have multiple noteworthy commits. You create a new changeset file by running: @@ -335,31 +355,24 @@ You create a new changeset file by running: pnpm change ``` +This will ask you which packages should be included in the changeset, and if the changes require a new version bump. Generally you should not select `major`, and you should only select `minor` if there are new features or significant improvements. If you don't select either it will become `patch`. + For your convenience, we prepared a video tutorial that covers the process of adding a changeset: [πŸ“½ TUTORIAL: Adding a changeset](https://go.screenpal.com/watch/cZivIcVPJQV) -### Pre-submit hooks - -The project has pre-submit hooks, which ensure that your code is correctly formatted. You can run them manually like so: +## PR merging (maintainers) -```shell -pnpm lint -``` +Make sure the PR follows all the guidelines in this document. Once you think the PR is good to merge, if the commits are "nice", you can merge the PR. If not, squash the PR. -Some issues can be fixed automatically by using: +In case the PR is stuck waiting for the original author to apply a trivial +change (a typo, capitalisation change, etc.) and the author allowed the members +to modify the PR, consider applying it yourself (or commit the existing review +suggestion). You should pay extra attention to make sure the addition doesn't go +against the idea of the original PR and would not be opposed by the author. -```shell -pnpm fmt -``` +## Releasing (maintainers) -## Releasing (core-team) +Merge the "version" PR, that is automatically created when a PR with a changeset is merged. You can first edit the files it created to get a nicer changelog. -1. Run `pnpm release.prepare`, which will test, lint and build. -2. Use the interactive UI to select the next version, which will update the `package.json` `version` property, add the git change, and start a commit message. -3. Create a PR with the `package.json` change to merge to `main`. -4. After the `package.json` with the updated version is in `main`, click the [Run Workflow](https://github.com/QwikDev/qwik/actions/workflows/ci.yml) button from the "Qwik CI" GitHub Action workflow. -5. Select the NPM dist-tag that should be used for this version, then click "Run Workflow". -6. The GitHub Action will dispatch the workflow to build `@builder.io/qwik`, `@builder.io/qwik-city` and each of their submodules, build WASM and native bindings, and validate the package before publishing to NPM. -7. If the build is successful and all tests and validation passes, the workflow will automatically publish to NPM, commit a git tag to the repo, and create a GitHub release. -8. ⚑️ +Once CI passes, the GitHub Action will publish the new version to NPM. diff --git a/flake.lock b/flake.lock index a1e73124bbe..0594f4d0447 100644 --- a/flake.lock +++ b/flake.lock @@ -2,11 +2,11 @@ "nodes": { "nixpkgs": { "locked": { - "lastModified": 1721138476, - "narHash": "sha256-+W5eZOhhemLQxelojLxETfbFbc19NWawsXBlapYpqIA=", + "lastModified": 1728888510, + "narHash": "sha256-nsNdSldaAyu6PE3YUA+YQLqUDJh+gRbBooMMekZJwvI=", "owner": "NixOS", "repo": "nixpkgs", - "rev": "ad0b5eed1b6031efaed382844806550c3dcb4206", + "rev": "a3c0b3b21515f74fd2665903d4ce6bc4dc81c77c", "type": "github" }, "original": { @@ -43,11 +43,11 @@ "nixpkgs": "nixpkgs_2" }, "locked": { - "lastModified": 1721355572, - "narHash": "sha256-I4TQ2guV9jTmZsXeWt5HMojcaqNZHII4zu0xIKZEovM=", + "lastModified": 1728959392, + "narHash": "sha256-fp4he1QQjE+vasDMspZYeXrwTm9otwEqLwEN6FKZ5v0=", "owner": "oxalica", "repo": "rust-overlay", - "rev": "d5bc7b1b21cf937fb8ff108ae006f6776bdb163d", + "rev": "4c6e317300f05b8871f585b826b6f583e7dc4a9b", "type": "github" }, "original": { diff --git a/package.json b/package.json index ab488d85ac9..e424719a072 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "dependencies": [ "@playwright/test" ], - "pinVersion": "1.40.0" + "pinVersion": "1.47.0" }, { "label": "Undici should always be * until we remove it", @@ -109,7 +109,7 @@ "@napi-rs/triples": "1.2.0", "@node-rs/helper": "1.6.0", "@octokit/action": "6.1.0", - "@playwright/test": "1.40.0", + "@playwright/test": "1.47.0", "@types/brotli": "1.3.4", "@types/bun": "1.1.6", "@types/cross-spawn": "6.0.6", diff --git a/packages/docs/.gitignore b/packages/docs/.gitignore index 2f759a2e1db..d01d4c6e05a 100644 --- a/packages/docs/.gitignore +++ b/packages/docs/.gitignore @@ -18,6 +18,7 @@ node_modules .vscode .rollup.cache tsconfig.tsbuildinfo +q-insights.json # Logs logs diff --git a/packages/docs/src/components/footer/footer.tsx b/packages/docs/src/components/footer/footer.tsx index 056af96a596..e74e9c2b86d 100644 --- a/packages/docs/src/components/footer/footer.tsx +++ b/packages/docs/src/components/footer/footer.tsx @@ -22,6 +22,7 @@ const linkColumns = [ { title: 'Tutorial', href: `${baseUrl}/ecosystem/#courses` }, { title: 'Presentations', href: `${baseUrl}/ecosystem/#presentations` }, { title: 'Community', href: `${baseUrl}/ecosystem/#community` }, + { title: 'Press', href: `${baseUrl}/press` }, ], ]; diff --git a/packages/docs/src/entry.ssr.tsx b/packages/docs/src/entry.ssr.tsx index e254ceadc48..68b3c038bd7 100644 --- a/packages/docs/src/entry.ssr.tsx +++ b/packages/docs/src/entry.ssr.tsx @@ -14,14 +14,14 @@ export default function (opts: RenderToStreamOptions) { lang: 'en', ...opts.containerAttributes, }, - // Core Web Vitals experiment until October 9: Do not remove! Reach out to @maiieul first if you believe you have a good reason to change this. + // Core Web Vitals experiment until November 8: Do not remove! Reach out to @maiieul first if you believe you have a good reason to change this. prefetchStrategy: { implementation: { linkInsert: 'html-append', linkRel: 'modulepreload', }, }, - // Core Web Vitals experiment until October 9: Do not remove! Reach out to @maiieul first if you believe you have a good reason to change this. + // Core Web Vitals experiment until November 8: Do not remove! Reach out to @maiieul first if you believe you have a good reason to change this. qwikPrefetchServiceWorker: { include: false, }, diff --git a/packages/docs/src/repl/repl-console.tsx b/packages/docs/src/repl/repl-console.tsx index a733cf791b9..a61d5e44ac4 100644 --- a/packages/docs/src/repl/repl-console.tsx +++ b/packages/docs/src/repl/repl-console.tsx @@ -7,7 +7,7 @@ export interface ReplConsoleProps { export const ReplConsole = component$(({ store }: ReplConsoleProps) => { return (
- {store.events.map((ev) => ( + {store.events.filter(Boolean).map((ev) => ( ))}
diff --git a/packages/docs/src/repl/repl-output-modules.tsx b/packages/docs/src/repl/repl-output-modules.tsx index 7c1468358fc..4cdf156fba0 100644 --- a/packages/docs/src/repl/repl-output-modules.tsx +++ b/packages/docs/src/repl/repl-output-modules.tsx @@ -26,6 +26,7 @@ export const ReplOutputModules = component$(({ outputs, headerText }: ReplOutput class={{ 'in-view': selectedPath.value === o.path }} preventdefault:click key={o.path} + title={o.path} > {o.path} diff --git a/packages/docs/src/repl/repl-output-panel.tsx b/packages/docs/src/repl/repl-output-panel.tsx index 06385eb677f..5c2ba35c156 100644 --- a/packages/docs/src/repl/repl-output-panel.tsx +++ b/packages/docs/src/repl/repl-output-panel.tsx @@ -1,4 +1,4 @@ -import { component$ } from '@builder.io/qwik'; +import { component$, useComputed$ } from '@builder.io/qwik'; import { CodeBlock } from '../components/code-block/code-block'; import { ReplOutputModules } from './repl-output-modules'; import { ReplOutputSymbols } from './repl-output-symbols'; @@ -8,6 +8,10 @@ import type { ReplAppInput, ReplStore } from './types'; export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProps) => { const diagnosticsLen = store.diagnostics.length + store.monacoDiagnostics.length; + const clientBundlesNoCore = useComputed$(() => + // Qwik Core is not interesting and is large, slowing down the UI + store.clientBundles.filter((b) => !b.path.endsWith('qwikCore.js')) + ); return (
@@ -111,7 +115,7 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp ) : null} {store.selectedOutputPanel === 'clientBundles' ? ( - + ) : null} {store.selectedOutputPanel === 'serverModules' ? ( diff --git a/packages/docs/src/repl/repl-output-symbols.tsx b/packages/docs/src/repl/repl-output-symbols.tsx index 0457c21a2a7..47846d85e6e 100644 --- a/packages/docs/src/repl/repl-output-symbols.tsx +++ b/packages/docs/src/repl/repl-output-symbols.tsx @@ -27,6 +27,7 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps }} class={{ 'in-view': selectedPath.value === o.path }} preventdefault:click + title={o.segment?.canonicalFilename} > {o.segment?.canonicalFilename} diff --git a/packages/docs/src/repl/repl-output-update.ts b/packages/docs/src/repl/repl-output-update.ts index 4cc4f38039c..1fe666a0dc6 100644 --- a/packages/docs/src/repl/repl-output-update.ts +++ b/packages/docs/src/repl/repl-output-update.ts @@ -24,7 +24,12 @@ export const updateReplOutput = async (store: ReplStore, result: ReplResult) => deepUpdate(store.transformedModules, result.transformedModules); deepUpdate(store.clientBundles, result.clientBundles); deepUpdate(store.ssrModules, result.ssrModules); - deepUpdate(store.events, result.events); + if ( + result.events.length !== store.events.length || + result.events.some((ev, i) => ev?.start !== store.events[i]?.start) + ) { + store.events = result.events; + } if (store.selectedOutputPanel === 'diagnostics' && store.monacoDiagnostics.length === 0) { store.selectedOutputPanel = 'app'; diff --git a/packages/docs/src/repl/worker/app-bundle-client.ts b/packages/docs/src/repl/worker/app-bundle-client.ts index 7c8cbf4befd..6bc1dcbd5a1 100644 --- a/packages/docs/src/repl/worker/app-bundle-client.ts +++ b/packages/docs/src/repl/worker/app-bundle-client.ts @@ -36,7 +36,6 @@ export const appBundleClient = async ( const rollupInputOpts: InputOptions = { input: entry.path, - cache: self.rollupCache, plugins: [ replCss(options), self.qwikOptimizer?.qwikRollup(qwikRollupClientOpts), @@ -71,8 +70,6 @@ export const appBundleClient = async ( const bundle = await self.rollup?.rollup(rollupInputOpts); if (bundle) { - self.rollupCache = bundle.cache; - const generated = await bundle.generate({ sourcemap: false, }); @@ -96,7 +93,7 @@ export const appBundleClient = async ( }) ); - // clear out old cache + // clear out old results cache // no need to wait cache.keys().then((keys) => { if (keys.length > 500) { diff --git a/packages/docs/src/repl/worker/repl-plugins.ts b/packages/docs/src/repl/worker/repl-plugins.ts index a4e8a8fa9f6..2e9cd574f9a 100644 --- a/packages/docs/src/repl/worker/repl-plugins.ts +++ b/packages/docs/src/repl/worker/repl-plugins.ts @@ -15,6 +15,7 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's name: 'repl-resolver', resolveId(id, importer) { + // Entry point if (!importer) { return id; } @@ -25,12 +26,10 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's ) { return '\0qwikCore'; } - if (id === '@builder.io/qwik/build') { - return '\0qwikBuild'; - } if (id === '@builder.io/qwik/server') { return '\0qwikServer'; } + // Simple relative file resolution if (id.startsWith('./')) { const extensions = ['', '.tsx', '.ts']; id = id.slice(1); @@ -41,10 +40,6 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's } } } - return { - id, - external: true, - }; }, async load(id) { @@ -59,20 +54,6 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's if (id === '\0qwikServer') { return getRuntimeBundle('qwikServer'); } - if (id === '\0qwikBuild') { - return ` - export const isServer = true; - export const isBrowser = false; - export const isDev = false; - `; - } - } - if (id === '\0qwikBuild') { - return ` - export const isServer = false; - export const isBrowser = true; - export const isDev = false; - `; } if (id === '\0qwikCore') { if (options.buildMode === 'production') { @@ -88,7 +69,11 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's } throw new Error(`Unable to load Qwik core`); } - return null; + + // We're the fallback, we know all the files + if (/\.[jt]sx?$/.test(id)) { + throw new Error(`load: unknown module ${id}`); + } }, }; }; diff --git a/packages/docs/src/root.tsx b/packages/docs/src/root.tsx index 2afe1a26381..f423e7d81ae 100644 --- a/packages/docs/src/root.tsx +++ b/packages/docs/src/root.tsx @@ -71,7 +71,7 @@ export default component$(() => { \n```\nBy default, the `prefetchEvent` implementation will be set to `always`.\n\n\n\n\n\n[workerFetchInsert?](#)\n\n\n\n\n\n\n\n'always' \\| 'no-link-support' \\| null\n\n\n\n\n_(Optional)_ `always`: Always include the worker fetch JS runtime.\n\n`no-link-support`: Only include the worker fetch JS runtime when the browser doesn't support `` prefetch/preload/modulepreload.\n\n\n\n", + "content": "```typescript\nexport interface PrefetchImplementation \n```\n\n\n\n\n\n\n\n\n
\n\nProperty\n\n\n\n\nModifiers\n\n\n\n\nType\n\n\n\n\nDescription\n\n\n
\n\n[linkFetchPriority?](#)\n\n\n\n\n\n\n\n'auto' \\| 'low' \\| 'high' \\| null\n\n\n\n\n_(Optional)_ Value of the `` attribute when link is used. Defaults to `null` if links are inserted.\n\n\n
\n\n[linkInsert?](#)\n\n\n\n\n\n\n\n'js-append' \\| 'html-append' \\| null\n\n\n\n\n_(Optional)_ `js-append`: Use JS runtime to create each `` and append to the body.\n\n`html-append`: Render each `` within html, appended at the end of the body.\n\n\n
\n\n[linkRel?](#)\n\n\n\n\n\n\n\n'prefetch' \\| 'preload' \\| 'modulepreload' \\| null\n\n\n\n\n_(Optional)_ Value of the `` attribute when link is used. Defaults to `prefetch` if links are inserted.\n\n\n
\n\n[prefetchEvent?](#)\n\n\n\n\n\n\n\n'always' \\| null\n\n\n\n\n_(Optional)_ Dispatch a `qprefetch` event with detail data containing the bundles that should be prefetched. The event dispatch script will be inlined into the document's HTML so any listeners of this event should already be ready to handle the event.\n\nThis implementation will inject a script similar to:\n\n```\n\n```\nBy default, the `prefetchEvent` implementation will be set to `always`.\n\n\n
\n\n[workerFetchInsert?](#)\n\n\n\n\n\n\n\n'always' \\| 'no-link-support' \\| null\n\n\n\n\n_(Optional)_ `always`: Always include the worker fetch JS runtime.\n\n`no-link-support`: Only include the worker fetch JS runtime when the browser doesn't support `` prefetch/preload/modulepreload.\n\n\n
", "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/server/types.ts", "mdFile": "qwik.prefetchimplementation.md" }, diff --git a/packages/docs/src/routes/api/qwik-server/index.md b/packages/docs/src/routes/api/qwik-server/index.md index a20bdbca343..819658c38ec 100644 --- a/packages/docs/src/routes/api/qwik-server/index.md +++ b/packages/docs/src/routes/api/qwik-server/index.md @@ -233,6 +233,21 @@ Description +[linkFetchPriority?](#) + + + + + +'auto' \| 'low' \| 'high' \| null + + + +_(Optional)_ Value of the `` attribute when link is used. Defaults to `null` if links are inserted. + + + + [linkInsert?](#) diff --git a/packages/docs/src/routes/docs/(qwik)/advanced/eslint/index.mdx b/packages/docs/src/routes/docs/(qwik)/advanced/eslint/index.mdx index e4d0caec29f..497c0803436 100644 --- a/packages/docs/src/routes/docs/(qwik)/advanced/eslint/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/advanced/eslint/index.mdx @@ -972,7 +972,7 @@ export const ColorList = component$(() => {
βœ“ ```tsx {4,12} /serverGreeter/#a -import { component$ } from '@builder.io/qwik'; +import { $, component$ } from '@builder.io/qwik'; import { server$ } from '@builder.io/qwik-city'; const serverGreeter = server$((firstName: string, lastName: string) => { @@ -982,10 +982,10 @@ const serverGreeter = server$((firstName: string, lastName: string) => { export default component$(() => ( diff --git a/packages/docs/src/routes/docs/(qwik)/advanced/modules-prefetching/index.mdx b/packages/docs/src/routes/docs/(qwik)/advanced/modules-prefetching/index.mdx index 41fa22c0153..5397a75392b 100644 --- a/packages/docs/src/routes/docs/(qwik)/advanced/modules-prefetching/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/advanced/modules-prefetching/index.mdx @@ -78,6 +78,7 @@ export default function (opts: RenderToStreamOptions) { | `prefetchEvent` | Dispatch a `qprefetch` event with `detail` data containing the urls that should be prefetched. The event dispatch script will be inlined into the document's HTML. By default, the `prefetchEvent` implementation will be set to `always`. | | `linkInsert` | Insert the `` element into the document. When using `html-append`, it will render each `` directly within the html, appended at the end of the body. Using the `js-append` option, it will instead insert some JavaScript, which creates the elements at runtime and appends them at the end of the body. | | `linkRel` | This option is used to define the [`rel` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) of the `` element. When the `linkInsert` option is used, the default is `prefetch`. Other options include `preload` and `modulepreload`. | +| `linkFetchPriority` | This option is used to define the [`fetchpriority` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#fetchpriority) of the `` element. When the `linkInsert` option is used, the default is `null`. Other options include `low`, `high` and `auto`. | `workerFetchInsert` | Prefetch urls by calling a `fetch()` for each module, with the goal of populating the network cache. | #### Dispatched Prefetch Event 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 819b8645df2..63bd210d5cc 100644 --- a/packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx @@ -61,7 +61,7 @@ export default component$(() => { > The `component$` function, marked by the trailing `$`, enables the Optimizer to split components into separate chunks. -This allows each chunk to be loaded independently as needed, rather than loading all components whenever the parent component is loaded. +This allows each chunk to be loaded independently as needed, rather than loading all components whenever the parent component is loaded. > Note: index.tsx, layout.tsx in routes folder, root.tsx and all entry files need **export default**. For other components you can use export const and export function. ### Composing Components @@ -113,13 +113,13 @@ export default component$(() => { ## Props -Props are used to pass data from the parent into the component. Data passed via props is accessible via the `props` argument to the `component$` function. +Props are used to pass data from the parent into the component. Data passed via props is accessible via the `props` argument to the `component$` function. Props are shallowly immutable, meaning primitive data types (strings, numbers, booleans) cannot be changed once passed. However, internal elements of reference types (objects, arrays, functions) can be changed despite the reference itself being immutable. To change primitive props data in the parent component from the child component, use signals. When updating data locally within the child component a signal is not necessary, destructure the props and use the values to define new local variables. -The two examples below show a component `Item` that declares optional `name`, `quantity`, `description`, and `price` props. +The two examples below show a component `Item` that declares optional `name`, `quantity`, `description`, and `price` props. In the first example, primitive data types are passed via props. The `price` prop is passed as a signal and can be changed from the parent component. `quantity` is passed as a number value that is used to define a new signal in `Item` that can be reactively updated locally. Alternatively, if quantity did not need to be reactive it could be defined as a normal variable instead of a signal. @@ -500,6 +500,7 @@ Note the `string extends C`, this is only true when TypeScript cannot infer the - [`$()`](../../advanced/qrl/index.mdx) - creates a QRL - [`noSerialize()`](/docs/components/state/#noserialize) - `useErrorBoundary()` +- [`qwikVite()`](../../advanced/vite/index.mdx#qwikvite) - entry point for qwik with vite ### Components @@ -507,7 +508,6 @@ Note the `string extends C`, this is only true when TypeScript cannot infer the - `` - declares a stream block - `` - declares a stream - `` - declares a JSX fragment - ## See Also - [Inline components](../overview/index.mdx#inline-components) diff --git a/packages/docs/src/routes/docs/(qwik)/concepts/think-qwik/index.mdx b/packages/docs/src/routes/docs/(qwik)/concepts/think-qwik/index.mdx index 0fb4d6def86..4b4f22001a2 100644 --- a/packages/docs/src/routes/docs/(qwik)/concepts/think-qwik/index.mdx +++ b/packages/docs/src/routes/docs/(qwik)/concepts/think-qwik/index.mdx @@ -56,7 +56,7 @@ The solution to the above problem is both obvious and hard: Ship less JavaScript The obvious part is that sites with less JavaScript will perform better. -The hard part is our tools don't help us to get there. The majority of Qwik's tools solve problems in a way that makes shipping less JavaScript hard. These tools are designed to solve a specific problem without thinking about the amount of JavaScript they generate. +The hard part is that our tools don't help us achieve this. Most of them solve problems in a way that makes shipping less JavaScript hard. These tools are designed to address specific issues without considering how much JavaScript they produce. Do you need to solve rendering, styling, animation, A/B testing, analytics, etc.? There is a tool for that. Just import or add a `