qwikdev / qwik Goto Github PK
View Code? Open in Web Editor NEWInstant-loading web apps, without effort
Home Page: https://qwik.dev
License: MIT License
Instant-loading web apps, without effort
Home Page: https://qwik.dev
License: MIT License
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
import { qComponent, qHook, h, useEvent } from '@builder.io/qwik';
export const Greeter = qComponent({
onRender: qHook((props) => (
<div>
</div>
)),
});
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)
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,
}
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.
Optimizer
is a tool that consumes input source files, and generates bundle chunks for the application. Optimizer
s responsibilities are:
Extract constant to module scope
on any call site of qHook
function.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)
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?
❯ 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)
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.
CreateRef() allows to get a ref to the actual html dom, once the jsx is rendered.
const ref = createRef();
return (
<div ref={ref}/>
)
withStyles
to useStyles
(because it has similar contextual semantics as use
methods.useTransient
to createTransient
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.
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?
During development, user code can make the dev server to crash, requiring developers to restart npm start
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).
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!
.html
that allows client bootstrapping, even without prerendering or SSR enabled.Compiling qwik in development has more than usual deps:
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.
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:
yarn test.unit
[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!
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?
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.
During development, this error seems to randomly log in the terminal and the component doesn't load, but there's no runtime error.
The state seems to get confused when you remove a todo
Nothing should be checked and there should be "2 items left"
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.
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?
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:
$
, only selection the text part. From component$
, only component
is selected, if double clicking on the identifier.$
has old school smell: angularjs and jquerycomponentXXX()
-> XXX()
)componentQrl(qrl())
$
_
qrl
hook
Q
Explicit
External
Inline
Lazy
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() |
This does not pass down the properties:
<SomeCmp {...someObj} />
Components have a need for composability. qEffect
should provide such a solution.
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>
)),
});
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.
The simple starter reproduces the problem. When typing the first time in the text input, the focus is lot.
package.json
files to the latest version of @builder.io/qwik
*.rename
on publish.tsconfig.json
issue.The vite
command works great, but vite build
seems to be tripping up on how to find source paths.
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:
npm init qwik@latest
✔ Select a starter › Todo
✔ Select a server › Express
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"
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:
Clear completed
button is not showing upClear completed
button returnsAfter setting up locally and playing a bit more, i'm experiencing more issues with the todo app:
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
.Active
and Completed
buttons do not seem to work either way.Is it possible to get an indication of how/if you would use this with nextjs - ideally with SSR.
Love your work team
Fix them and make them errors.
// Warning: (ae-forgotten-export) The symbol "QwikEvents" needs to be exported by the entry point index.d.ts
export const cache = patternCache[cacheKey] || (patternCache[cacheKey]={});
export const cache = patternCache[cacheKey] || patternCache[cacheKey] = {
};
export const cache = patternCache[cacheKey] || (patternCache[cacheKey] = {
});
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))
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.qObject
.qObject()
API
qSubscribe()
API
qEvent()
API
qHook()
API
qComponent()
API
Next Task
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.