builderio / qwik

Instant-loading web apps, without effort

Instant-loading web apps, without effort

Qwik offers the fastest possible page load times - regardless of the complexity of your website. Qwik is so fast because it allows fully interactive sites to load with almost no JavaScript and pickup from where the server left off.

As users interact with the site, only the necessary parts of the site load on-demand. This precision lazy-loading is what makes Qwik so quick.

Getting Started

npm create qwik@latest
# or
pnpm create qwik@latest
# or
yarn create qwik@latest
# or
bun create qwik@latest

• Understand the difference between resumable and replayable applications.
• Learn about Qwik's high level mental model.

Resources

• Docs
• Examples
• Tutorials
• Videos
• Podcasts
• Presentations
• Blogs

Community

• Ping us at @QwikDev
• Join our Discord community
• Join all the other community groups

Development

• See Contributing.md for more information on how to build Qwik from the source and contribute!

Related

• Partytown: Relocate resource intensive third-party scripts off of the main thread and into a web worker 🎉.
• Mitosis: Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.
• Builder: Drag and drop page builder and CMS for React, Vue, Angular, and more.

qwik's Issues

Build Qwik-docs using qwik

Loss of focus when hydration happens

The simple starter reproduces the problem. When typing the first time in the text input, the focus is lot.

Figure out root component

• Where should the root component be located?
• How should the root component be named?
• What does the root component render?

Optimizer does not emit required imports

Repo link

https://qwik-playground.builder.io/#TZDBboMwDIZfxYoqARKllFXdtA202+7blUtHXBYtOJ0JdBXi3WfgUC6J/Tn+/9iDqpxG9axMc3HsYYDKSURIfhODow8kjbyBEc7sGgjevjpjhSTG7X6v5id4Kakk/JubK0eth3dG9MiQr6TCMIK8gKEkuIuuIQCj75ggXDKAV236XbFk0XSNkXjNR0mLkxaPtVpeTNxZTKyrw8B/G6qDaOpQsWoMmfNNJm1lVDuFsZKv8e3T88ljPZeaE3vhQqi9GCuL8dxhrHqDV6k3TncWW3nRI7fGkbA0SZP9cXvYauyzNMvSffa4Pz5khyc1/gM=

Output

import * as qwik from "@builder.io/qwik";
import { component } from "@builder.io/qwik";
export const Greeter = component(qwik.qrl(()=>import("./entry_Greeter")
, "Greeter_component"));
onRender(qwik.qrl(()=>import("./entry_d")
, "d_onRender"));

notice that onRender() is not declared.

Move QwikLoader into @builder.io/qwik

Because we're inlining the Qwik Loader into the JSX that can be used in either server or client, we should have it exported from core instead. Otherwise client builds try to import all the other server code and get tripped up. Discovered this when testing with Remix, since it handles the server build for you.

Qwik Optimizer

Goal

Optimizer is a tool that consumes input source files, and generates bundle chunks for the application. Optimizers responsibilities are:

• Perform Extract constant to module scope on any call site of qHook function.
• Leave behind QRLs that point to the extracted constant.
• Generate synthetic import modules so that bundler (rollup) can create an optimal set of chunks.
• Run the result through the bundler to create optimal bundle chunks.

Example

The developer writes:
header.ts:

export const Header = qComponent<{ todos: Todos }, { text: string }>({
  onMount: qHook(() => ({ text: '' })),
  onRender: qHook((_, { text }) => (
      <a on:click={qHook<typeof Footer, { filter: FilterStates }>((props, _, { filter }) =>
              updateFilter(props.todos, filter)
            ).with({ filter })}
          />
  )),
});

Optimizer refactors it to something like so:

export const Header_onMount =  qHook(() => ({ text: '' }));
export const Header_onRender = qHook((_, { text }) => (
      <a on:click={qHook('chunk-pqr#Header_onRender_onClick').with({ filter })}/>
  ))
export const Header_onRender_onClick = 
  qHook<typeof Footer, { filter: FilterStates }>(
    (props, _, { filter }) => updateFilter(props.todos, filter));

export const Header = qComponent<{ todos: Todos }, { text: string }>({
  onMount: qHook('chunk-abc#Header_onMount'),
  onRender: qHook('chunk-xyz#Header_onRender'),
});

chunk-abc:

export {Header_onMount} from './header';

chunk-pqr:

export {Header_onRender_onClick} from './header';

chunk-xyz:

export {Header_onRender} from './header';

https://hackmd.io/lGHH9hjrSNq7yorN2EOBHA (old)
https://hackmd.io/KLG7PrXlQTWO6ZkBPVRAmQ (new)

Review api-extractor warns and make them errors

Fix them and make them errors.

// Warning: (ae-forgotten-export) The symbol "QwikEvents" needs to be exported by the entry point index.d.ts

ROADMAP: $state immutable

reference
For some reason I thought there wasn't a global state, but saved in the DOM? Or is this the state cached in memory while said DOM is processed?

Is this state directly accessible by user code, or only via Quik?
Either way, I lean towards which ever is fastest. Could try non-immutable for v1, then visit the question again for v2; seems getting rid of immutable would be harder for programmers than adding later.

---

BTW, I thought of using flatstr to before saving/sending state in microservices. Performance gains from using flatstr:

ManySmallConcats: 28%
SeveralLargeConcats: 21% 
ExponentialSmallConcats: 46%
ExponentialLargeConcats: 33%

best place to use flatstr is just prior to passing it to an API that eventually runs non-v8 code (such as fs.WriteStream, or perhaps xhr or DOM apis in the browser).

Design `qEffect` API

Components have a need for composability. qEffect should provide such a solution.

Example

Code example is worth a thousand words!

Imagine you have a piece of code that reports mouse position. A pseudo-code may look like this:

interface MousePosition {
  x: number;
  y: number;
}

const useMousePosition = qEffect<{}, MousePosition>({
  onMount: () => ({ x: 0, y: 0 }),
  listen: {
    ['on:document:mousemove']: qHook((_, state: MousePosition) => {
      const mEvent = useEvent<MouseEvent>();
      state.x = mEvent.x;
      state.y = mEvent.y;
    }),
  },
});

Such code can then be used like so:

export const Header = qComponent<{}, { mouse: MousePosition }>({
  onMount: qHook(() => ({ mouse: useMousePosition({}) })),
  onRender: qHook((_, { mouse }) => (
    <span>
      {mouse.x}, {mouse.y}
    </span>
  )),
});

Goals

• The effect should be initialized on server and survive serialization to the client.
• The effect should be hydrated independently from the component using it.
• The effect should be composable (used by other effects)

Support for <svg>

Currently all elements are created using createElement() the result is that <svg> is not correctly created. Instead we should detect <SVG> and user createElementNS() to support SVG in the JSX.

Implement createRef()

CreateRef() allows to get a ref to the actual html dom, once the jsx is rendered.

const ref = createRef();
return (
  <div ref={ref}/>
)

Update cloudflare starter to use Pages correctly

Rewrite TODO app in the new format

npm run build: Error: spawn wasm-pack ENOENT

❯ npm run build

> @builder.io/[email protected] build
> node scripts --tsc --build --api --platform-binding --wasm

🌎 Qwik v0.0.14.20211202063605
🐶 tsc
🐷 generated package.json
🐮 jsx-runtime
🦁 testing
🐹 optimizer
🐸 qwikloader: 970b (590b gz)
🦊 core.mjs: 88.8kb (22.2kb gz)
🐨 prefetch: 975b (599b gz)
🐭 core.min.mjs: 22kb (8.1kb gz)
🐰 server
error: failed to parse manifest at `/home/brian/work/BuilderIO/qwik/src/napi/Cargo.toml`

Caused by:
  feature `edition2021` is required

  this Cargo does not support nightly features, but if you
  switch to nightly channel you can add
  `cargo-features = ["edition2021"]` to enable this feature
Internal Error: Command failed: cargo build --release
    at checkExecSyncError (node:child_process:826:11)
    at execSync (node:child_process:900:15)
    at BuildCommand.<anonymous> (/home/brian/work/BuilderIO/qwik/node_modules/@napi-rs/cli/scripts/index.js:23590:42)
    at Generator.next (<anonymous>)
    at /home/brian/work/BuilderIO/qwik/node_modules/@napi-rs/cli/scripts/index.js:68:61
    at new Promise (<anonymous>)
    at __async (/home/brian/work/BuilderIO/qwik/node_modules/@napi-rs/cli/scripts/index.js:52:10)
    at BuildCommand.execute (/home/brian/work/BuilderIO/qwik/node_modules/@napi-rs/cli/scripts/index.js:23572:12)
    at BuildCommand.validateAndExecute (/home/brian/work/BuilderIO/qwik/node_modules/@napi-rs/cli/scripts/index.js:962:37)
    at Cli2.run (/home/brian/work/BuilderIO/qwik/node_modules/@napi-rs/cli/scripts/index.js:1992:36)

❌ napi exited with code 1
 Error: napi exited with code 1
    at panic (/home/brian/work/BuilderIO/qwik/scripts/util.ts:245:33)
    at build (/home/brian/work/BuilderIO/qwik/scripts/build.ts:109:5)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Todo app is broken

Great work on this new framework!
As mentioned on discord, i've experienced the buggy active state as well:

When you use the Clear completed button in the qwik-todo-demo on Stackblitz, i'm getting the following behaviour:

• the active item(s) are cleared (good, as expected)
• whenever an active item position remains in the list, the checkbox remains checked
• in the latter case, when you deactivate/activate the item, the Clear completed button is not showing up
• only if you add more new items than the previous cleared list the Clear completed button returns

After setting up locally and playing a bit more, i'm experiencing more issues with the todo app:

• the items left count is messed up after you've cleared the list. The counter increases when you try to deactivate the magically activated item (see above), which increases the count for no good reason.
• the Active and Completed buttons no longer work and result in an console error: qwikloader.ts:62 Uncaught (in promise) TypeError: Failed to resolve module specifier 'qwik.js' at HTMLDocument.processEvent.
• Actually, the Active and Completed buttons do not seem to work either way.

Create new starters

• Global state
• Better folder structure
• Assets / components / pages

TodoMVC Express Starter appears to be broken

A fresh install of the TodoMVC example doesn't appear to be working properly. The header doesn't render and I get the following error in dev:

Error: failed to load module for ssr: /src/components/header/h_header_header.js
    at instantiateModule (/Users/ryancarniato/Development/examples/qwik-todomvc/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60025:15)
Error: failed to load module for ssr: /src/components/footer/h_footer_footer.js
    at instantiateModule (/Users/ryancarniato/Development/examples/qwik-todomvc/node_modules/vite/dist/node/chunks/dep-f5552faa.js:60025:15)

Steps to Reproduce:

1. npm init qwik@latest

2. ✔ Select a starter › Todo
   ✔ Select a server › Express

3. npm i
   npm run dev

Also appears npm run build fails as well:

vite v2.7.13 building for production...
✓ 2 modules transformed.
[vite:build-import-analysis] Parse error @:24:17
file: /Users/ryancarniato/Development/examples/qwik-todomvc/src/components/app/app.tsx:24:16
22:         <Main todos={props.todos} />
23:         <Footer todos={props.todos} />
24:       </section>
                    ^
25:     );
26:   });
error during build:
Error: Parse error @:24:17
    at parse$f (/Users/ryancarniato/Development/examples/qwik-todomvc/node_modules/vite/dist/node/chunks/dep-f5552faa.js:20847:353)
    at Object.transform (/Users/ryancarniato/Development/examples/qwik-todomvc/node_modules/vite/dist/node/chunks/dep-f5552faa.js:21106:27)
[!] Error: unfinished hook action(s) on exit:
(vite:load-fallback) load "/Users/ryancarniato/Development/examples/qwik-todomvc/node_modules/@builder.io/qwik/qwikloader.js"
(vite:load-fallback) load "/Users/ryancarniato/Development/examples/qwik-todomvc/node_modules/@builder.io/qwik/core.mjs"

vite build doesn't work

The vite command works great, but vite build seems to be tripping up on how to find source paths.

Starter project using `npm init qwik@latest` has small flaws

Trying to play with Qwik locally for the first time, and I notice a few small flaws with the default Starter project (at least on Chrome Canary 100.0.4861.0 (Official Build) canary (x86_64))

• The input textbox loses focus on first lazy resumption. Afterwords, acts fine.
• The npm start command seems to "watch" for local changes, and rebuilds. When I save changes to my-app.tsx I see the script output-- but refreshing the page in browser doesn't load latest changes.

rollup optimizer: ESM outputs do not write to symbolsPath

I'm am attempting to use ESM for the nodejs server. I'm not able to start the server using the todo-list example provided in this repo. The optimizer rollup plugin does not output to symbolsPath.

See:

https://github.com/BuilderIO/qwik/blob/main/src/optimizer/src/rollup/index.ts#L150-L160

https://github.com/BuilderIO/qwik/blob/main/src/server/create-server-renderer.ts#L25-L26

Minification break h() import

Input

import { qComponent, qHook, h, useEvent } from '@builder.io/qwik';

export const Greeter = qComponent({
  onRender: qHook((props) => (
    <div>
    </div>
  )),
});

Output

import{h as a}from"@builder.io/qwik";import{qHook as b}from"@builder.io/qwik";export const Greeter_onRender=/*#__PURE__*/ b(a=>h("div",null));

Notice the h is renamed to a:

import{h as a}from"@builder.io/qwik";

but h is still referenced in the JSX:

h("div",null)

Repo link: https://qwik-playground.builder.io/#TY/NbsJADIRfxdoLibQNcOmBFlSpqtpze82lEAMWiZ14NwEU5d1x+JG4jcaeb+zebaRAt3BU1aIRemg+xSQjRw/Nj8jBw95DG/CrMw8G2KpUMPlYt1QWqBnJtDnSYfKWc854ulI2wiHCtyJGVFg+MZM+ZwDhX2QLL24NSVKr1CGF5QqScQ7wXlC3usvpQ6epz3lIrcl5VxHT9myX34V3htfzX9T/iLtxsDe02WZwqKm0L6O26F1HeBxzUrQlBtvoUAMJmzfLZtn89WXuhgs=

Improve Qwik Loader Closure

Noticed the qwik loader that gets inlined in the <head> isn't within a good closure, so the variables are going on window and minification could be improved yet.

Test suite for the rollup plugin

Qwik docker file

Compiling qwik in development has more than usual deps:

• Rust toolchain
• Wasm
• Several rust cargo bins
• Specific node versions

A dockerfile will help our infra team at builder.io and part of the community familiar with rust.

Notice, that docker will NEVER be required. Its just another option to have a fully working environment.

npm start fails on windows

Hi All,

I tried npm init qwik@latest on a windows 10 machine

Chose the starter, did cd qwik-app npm install

Did npm start, all good so far,

Tried to go to http://localhost:8080 in a browser, this fails, and outputs this in the console

 rollup v2.61.1
[0] bundles src/index.server.qwik.tsx, src/my-app.qwik.tsx → public\build, server\build...
[0] created public\build, server\build in 2.2s
[1]
[1] > [email protected] serve
[1] > node server/index.js
[1]
[1] http://localhost:8080/
[1] D:\qwik\qwik-app\server\build\my-app.qwik-de6c5198.js:943
[1]         throw new Error(`Not QRL: prop: ${prop}; value: ` + value);
[1]               ^
[1]
[1] Error: Not QRL: prop: on:q-mount; value: async (element, event, url) => {
[1]         const isQwikInternalHook = typeof event == 'string';
[1]         // isQwikInternalHook && console.log('HOOK', event, element, url);
[1]         // `isQwikInternalHook` is a bit of a hack. When events fire we need to treat self as host
[1]         // but if it is regular event than we need to skip us.
[1]         const hostElement = getHostElement(isQwikInternalHook ? element : element.parentElement);
[1]         const props = hostElement && qProps(hostElement);
[1]         const parsedQRL = props && parseQRL(url.toString(), props.__qMap__);
[1]         const state = props && parsedQRL && props['state:' + parsedQRL.getState()];
[1]         const args = parsedQRL && parsedQRL.args;
[1]         return await useInvoke(() => hook(props, state, args), hostElement, event, url);
[1]     }
[1]     at addQrlListener (D:\qwik\qwik-app\server\build\my-app.qwik-de6c5198.js:943:15)
[1]     at Object.set (D:\qwik\qwik-app\server\build\my-app.qwik-de6c5198.js:828:21)
[1]     at Function.assign (<anonymous>)
[1]     at _reconcileElement (D:\qwik\qwik-app\server\build\my-app.qwik-de6c5198.js:1356:16)
[1]     at cursorReconcileElement (D:\qwik\qwik-app\server\build\my-app.qwik-de6c5198.js:1311:16)
[1]     at visitJsxLiteralNode (D:\qwik\qwik-app\server\build\my-app.qwik-de6c5198.js:1639:27)
[1]     at visitJsxNode (D:\qwik\qwik-app\server\build\my-app.qwik-de6c5198.js:1583:13)
[1]     at visitJsxNode (D:\qwik\qwik-app\server\build\my-app.qwik-de6c5198.js:1604:13)
[1]     at visitJsxLiteralNode (D:\qwik\qwik-app\server\build\my-app.qwik-de6c5198.js:1644:13)
[1]     at visitJsxNode (D:\qwik\qwik-app\server\build\my-app.qwik-de6c5198.js:1583:13)
[1] wait-on public/build && npm run serve exited with code 1

node is version 16.13.1

Am I missing a step? Perhaps windows isn't supported?

Port qwik-playgroun to qwik

• Migrate app from react to qwik
• Allow running the app in the browser with serviceworkers

Conditional building for client / ssr

Add a way to conditional run code in the server or the client, that is treeshake friendly:

import { Build } from '@builder.io/qwik';

if (Builder.isServer) { 
  // a lot of code that get tree shaken in the client build
}

Build {
isServer: boolean,
isClient: boolean,
}

Naming decisions

• #191
• Renamed withStyles to useStyles (because it has similar contextual semantics as use methods.
• useTransient to createTransient

Stackblitz demo in readme has a state bug on deleiton

Description

The state seems to get confused when you remove a todo

Repro

1. open demo in readme
2. check the first item
3. delete the first, selected, item by clicking the X on the right

Expected result

Nothing should be checked and there should be "2 items left"

Actual Result

The (previously) second item, which is now first is checked but not crossed out. Clicking on the check will turn it into 2 items left and again into 3 items left when there are only 2 items present.

Slot content projection doesn't load mdx components

In the docs site, when the Layout components wraps a content component (built from mdx), the content does render, but if the content has a child component it doesn't render.

Main component: https://github.com/BuilderIO/qwik/blob/844a1b2c03bdb685dfb4e11cc7e48c83e1e170a1/docs/site/src/main.tsx#L18-L20

Layout component w/ Slot:
https://github.com/BuilderIO/qwik/blob/844a1b2c03bdb685dfb4e11cc7e48c83e1e170a1/docs/site/src/layouts/docs/docs.tsx#L25

The bootstrap.mdx file has a <Counter/> component: https://github.com/BuilderIO/qwik/blob/844a1b2c03bdb685dfb4e11cc7e48c83e1e170a1/docs/guide/bootstrap.mdx

The counter component works when not using slot and wiring up the bootstrap component directly.

Static Site Generation - SSG

Hi,

First of all, let me express how much I love the idea behind qwik and what it promises. Resumability is indeed a great thing.

I am looking for a framework to use with my new project. It's going to be many (eventually tens of thousands of) landing pages statically generated from a set of structured data and then hosted as pure HTML files on a CDN. Qwik would be an ideal candidate because performance is very important for me, my content is mostly static but I'd love to provide an app-like UX.

Is it possible to achive my goal with qwik? So, that I would generate many static HTML files from a few templates and lots of data, then just copy the files to the server?

Thank you for reading so far and I appreciate your work a lot!

Implement and test on*() methods

• onHydrate()
• onResume()
• onUnmount()
• onDehydrate()
• on()
• onDocument()
• onWindow()

Revisit $ hook API

The $ signal both developers and the compiler that the first argument needs to be moved. This is important for developers to know, cuz $ functions have special rules.

This discussion is purely a naming discussion and adds to design constraints to the existing one:

Existing constrains:

• We need to a way to signal a function is special (prefix or suffix)
• It needs to be a suffix, cuz the prefixes are already reserved for (use, on, with, create). adding new prefix would make code hard to read and understand.
• There are always two versions of the same function. One with the signal (the ones that includes the magic) and a second one that takes a QRL directly.
• Compiler magic only applies to the first argument of the function
• No special cases, no function is different (other than different types)
• External developers can create their own custom functions that trigger optimiser magic

New constrains:

• DX: Make the function with the signal (the magic one), the default one in terms of IDE autocompletion
• DX: Make the function with the signal (the magic one), the default one in typing (make the preferred function to be shorter)
• DX: Double clicking to select the whole identifier breaks with $, only selection the text part. From component$, only component is selected, if double clicking on the identifier.
• Subjetive: $ has old school smell: angularjs and jquery
• No basic feature needs to use the explicit qrl() mode. Meaning moving components tag name to an options argument at the end.

Extra constrains?

• Signal suffix === hook function name (componentXXX() -> XXX())
• Not magic functions can not end with the name of the hook function. The following is not allowed componentQrl(qrl())

Keywords

• $
• _
• qrl
• hook
• Q
• Explicit
• External
• Inline
• Lazy

Possible solutions

CURRENT:	$()	component$()	component()
1	qrl()	componentQrl()	componentQrlExplicit()
2	$()	componentQrl()	componentQrlExplicit()
3	Q()	componentQ()	componentExplicit()
4	Q()	componentQ()	componentQrl()
5	Q()	componentQ()	componentFromQrl()
6	_()	component_()	componentQrl()
7	_()	component_()	component_explicit()
8	qrl()	component_()	component_explicit()
9	$()	component$()	componentQrl()

Vite dev mode crashes

During development, user code can make the dev server to crash, requiring developers to restart npm start

Input in basic starter loses focus after loading script

Hi,
First of all, thanks for building this very exciting piece of technology :)
I'm just trying the simple starter and I think there is something that's not working as intended. When I first start typing something in the text field it loses focus almost immediately (when the script finishes loading?). But this doesn't happen re-focusing and typing again, check my short video for demonstration. This is surely not the intended behaviour?

Screen.Recording.2021-12-23.at.20.53.29.mov

Spread operators do not work as JSX props

This does not pass down the properties:

<SomeCmp {...someObj} />

Qwik Simplification Refactoring to improved DX

Overall

• Multiple components/hooks per file
• Developer does not need to think about file breakup.
• Simplified application state persistence through qObject.

Criterion for when done:

• #61
• delete existing code
• Make all tests pass
• #64
• #63
  • Implement
• Design qObject() API
  • Implement
• Design qSubscribe() API
  • Implement
• Design qEvent() API
  • Implement
• Design qHook() API
  • Implement
• Design qComponent() API
  • Implement

Next Task

• #60

Unhandled promise rejection in boot-loader prefetching

This project is exciting! Keep the momentum.

I ran into a failing unit test due to an unhandled promise rejection. I think it might have slipped by if you've only run the unit tests with an earlier version of node that just provides a warning in this situation.

Steps to reproduce:

1. Use NodeJS v16+
2. Run unit tests via yarn test.unit
3. Result:

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch
block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason
"TypeError: Cannot read property 'headers' of null".] {
  code: 'ERR_UNHANDLED_REJECTION'
}
 FAIL  src/bootloader-shared.unit.ts
  ● Test suite failed to run

    Jest worker encountered 4 child process exceptions, exceeding retry limit

      at ChildProcessWorker.initialize (node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)

The error appears to originate in the setUpWebWorker() function in src/bootloader-shared.ts. Specifically, this statement:

((await fetch(url)).headers.get('Link') || '').replace(
  /<([^>]*)>/g,
  prefetch as any as (_: string, url: string) => string
);

We're expecting fetch(url) to return a response with a headers key. The mock for fetch in the unit test, however, returns null:

const mockFetch = jest.fn(() => null);

I tried changing the mock to provide the minimal response object to avoid an error, and it appears to resolve the issue:

const mockFetch = jest.fn(() => ({ headers: { get: () => {}}}));

  prefetch
    setUpWebWorker
      ✓ should listen on events and fire fetch

Is this the correct way to resolve the issue? If so, I could submit a pull request.

I appreciate any insight you can provide as well. Thanks!

Static arrays can not be captured.

Is there any plan to support html streaming?

I am just a huge fan of solid.js which is an efficient, reactive & tiny (about 6 kbs) front end framework & now I am using Solid Start which an SSR framework for solid.js which Supports Html Streaming (is a way of rendering while fetching the data on the server) & I think it's cool.

If a data letancy is very high or if we have a lot of data to load, we can experience a blocking time of waiting until the whole data is fetched. To solve these we use html streaming.

For example, this is a hacker news demo which loads a lot of data which is not really good to wait for each & every data to come in to start rendering the page! It will be really blocking & don't give any feedback what is going on to the users.
https://qwik-hackernews.ryansolid.workers.dev/stories/30186326

With html streaming we can fetch the static parts of the web page & put a loading spinning on the page until the data comes in. this tells users there is some work that is going, it doesn't block rendering.

https://hackernews.ryansolid.workers.dev/stories/30186326

Also I know that both of them don't have a good perfmance scores in when loading this page because it's a huge mess, but as a user experience it's good to have some thing on the screen as much as possible. If we wait for everything to come to start rendering, ux will be some what unpleasant.

Note that I am not trying to say which framework is the fast, I am asking for a feature support.

Is there any plan to support HTML Streaming in Qwik?

Handle window paths in the optimiser

Example in nextjs?

Is it possible to get an indication of how/if you would use this with nextjs - ideally with SSR.

Love your work team

Simplify minification generates invalid JS

Input

export const cache = patternCache[cacheKey] || (patternCache[cacheKey]={});

Output

export const cache = patternCache[cacheKey] || patternCache[cacheKey] = {
};

Expected

export const cache = patternCache[cacheKey] || (patternCache[cacheKey] = {
});

Repo URL: https://qwik-playground.builder.io/#bY6xDoJADIZf5dJJEySwOGiYHB0dxeECVS/hepdeQQnw7hZml6b9vubPP0ETWoQT1ITfGFhMEyjptM0bTWWiFUGmy3reN3jF8WHm2ez+q2pa9ueaIAPvyD1HjU7Ox25dM0ASHm/CVvC1KW9ZlCuhFF2nTYR7zGBw+FHvQ9t3mPRjQE4ukLIiL/LyeChh+QE=

Add public documentation

Improve: `npm init qwik@latest`

• Server needs to be able to serve changes without restarting
• dev-mode incorrectly loads from NPM rather than from local copy.
• Need a centralized way to update all of the package.json files to the latest version of @builder.io/qwik
• Rename *.rename on publish.
• Local development needs to solve the tsconfig.json issue.

Error: failed to load module for ssr

During development, this error seems to randomly log in the terminal and the component doesn't load, but there's no runtime error.

Figure out global styles + local styles for starters

Qwik prerendering setup

Client bootstrapping in the starter

• Add a way for development to be client bootstrapped instead of SSR
• Client deployment includes always a .html that allows client bootstrapping, even without prerendering or SSR enabled.
• Client bootstrapping emits a warning in the console logs

Is there a plan to support html streaming?

I am just a huge fan of solid.js which is an efficient, reactive & tiny (about 6 kbs) front end framework & now I am using Solid Start which an SSR framework for solid.js which Supports Html Streaming (is a way of rendering which fetching a data in the server) & I think it's cool!

If a data letancy Is very high we can experience a blocking time of waiting until the whole data is fetched to solve these we use html streaming!

Is there any plan to support HTML Streaming in Qwik?