-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
165 additions
and
22 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
--- | ||
title: 🧪 Qwik Labs | ||
contributors: | ||
- mhevery | ||
--- | ||
|
||
# 🧪 Qwik Labs Overview | ||
|
||
Qwik Labs is an incubator for ideas that are not yet ready for production. It is a place where we can publish our "work in progress" so that the community can give it a try and provide feedback without any guarantees that the feature is stable or it will make it to production. Because these are ideas in initial stages of forming, chances are that they will significantly change over their lifetime and so should not be relied upon in production. | ||
|
||
USE AT YOUR OWN RISK. | ||
|
||
> **DISCLAIMER:** Qwik Labs is a place to experiment, as such: | ||
> - We make to guarantees about stability of API: _we can break it at any point._ | ||
> - It is not ready for production: _we want you to try it and give us feedback so that we can improve._ | ||
> - No guarantees that the feature will ever make it to production: _it can be abandon at any point._ | ||
> | ||
> **Expect lots of breaking changes as the features are being developed!!!** | ||
## Stages | ||
|
||
Each Qwik Labs feature can roughly be thought of as going through these stages: | ||
1. `proposal`: An RFC proposal no code yet | ||
2. `prototyping`: An experimental stage where we explore the API, algorithm and approaches. Missing features, probably not in a usable state. | ||
3. `implementation`: We know what needs to be built and are going through the built out process. | ||
4. `alpha`: We think the project is ready to receive feedback from the community. Try it out and let us know what works and what does not. | ||
5. `beta`: We think the project is ready to graduate to the main repo and be used in production. | ||
|
||
## Installation | ||
|
||
Qwik labs are distributed as a separate node package. Because Qwik Labs is "work in progress" the node package is not published to NPM but instead as a github URL. The package is continually updated and so it will always contains the latest build. (You may read up on installing node packages [here](https://docs.npmjs.com/cli/v8/commands/npm-install).) | ||
|
||
|
||
```sh | ||
npm install github:BuilderIo/qwik-labs-build#main | ||
``` | ||
|
||
Or just add this to your `pakcage.json` | ||
|
||
```javascript | ||
{ | ||
... | ||
"dependencies": { | ||
... | ||
"@builder.io/qwik-labs": "github:BuilderIo/qwik-labs-build#main", | ||
} | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
--- | ||
title: 🧪 Insights | ||
contributors: | ||
- mhevery | ||
--- | ||
|
||
# 🧪 Insights | ||
**Stage:** `prototyping` | ||
|
||
Insights allows your application to collect real user usage information to optimize the creation of bundles. By observing real user behavior the Qwik build system can than do a better job of placing symbols which are used together into a same chunk and thus minimizing the waterfall effect which could occur if there are too many small files that need to be downloaded. | ||
|
||
## Architecture | ||
|
||
The optimization consists of these parts: | ||
- A `<Insights>` component which collects real user usage data. | ||
- A hosted application with a database. (http://qwik-insights.builder.io) | ||
- a vite time plugin which provides the bundle information. | ||
|
||
## `<Insights>` component | ||
|
||
The `<Insights>` component should be added to your `root.tsx` file. | ||
|
||
```typescript | ||
// ... | ||
import { Insights } from '@builder.io/qwik-labs'; | ||
|
||
export default component$(() => { | ||
// ... | ||
return ( | ||
<QwikCityProvider> | ||
<head> | ||
// ... | ||
<Insights | ||
publicApiKey={import.meta.env.PUBLIC_QWIK_INSIGHTS_KEY} | ||
/> | ||
</head> | ||
<body lang="en"> | ||
// ... | ||
</body> | ||
</QwikCityProvider> | ||
); | ||
}); | ||
``` | ||
|
||
You can get `PUBLIC_QWIK_INSIGHTS_KEY` by visiting https://qwik-insights.builder.io/ and creating an application. | ||
|
||
The `<Insights>` component collects this data: | ||
- Timing information of symbols. | ||
- The `pathname` part of the URL. | ||
- Random sessionID which identifies which symbol loads came from the same browser session. | ||
|
||
NOTE: The `<Insights>` component does not collect any user identifiable information. | ||
|
||
The information collected is sent to https://qwik-insights.builder.io/ for storage. | ||
|
||
## Hosted application | ||
|
||
The https://qwik-insights.builder.io/ is hosted part of the Insights which keeps statistical usage information on the application symbols. (The implementation of the service is open source, and you may chose to use ours or host your own. This may become a paid service in the future.) | ||
|
||
## Vite integration | ||
|
||
Once the application is running for a while and it collects sufficient information on symbol usage, the stats can be used to improve the bundles of the future version of the application. This is done by connecting the vite build with Insights like so: | ||
|
||
file: `vite.config.js` | ||
```typescript | ||
//.. | ||
import { defineConfig, loadEnv } from 'vite'; | ||
import { Insights } from '@builder.io/qwik-labs'; | ||
|
||
|
||
export default defineConfig(async () => { | ||
return { | ||
plugins: [ | ||
qwikVite({ | ||
entryStrategy: await insightsEntryStrategy({ | ||
publicApiKey: loadEnv('', '.').PUBLIC_QWIK_INSIGHT_KEY, | ||
}), | ||
}), | ||
//... | ||
], | ||
// ... | ||
}; | ||
}); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
PRIVATE_LIBSQL_DB_URL=libsql://qwik-bundalyzer-mhevery.turso.io | ||
PRIVATE_LIBSQL_DB_API_TOKEN=eyJhbGciOiJFZERTQSIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2ODcyMTQxNTAsImlkIjoiMGU3NDI3ZjYtMGVlMy0xMWVlLThkYTctYmViOGE0ZTk3MTE3In0.Q2aMD5rP4TpLBTSPxp2eVPgd-CLFiVIzz81bOEk0h4go0KgyIpa38WHJhvg5Dn_978VeE3bthwv1BrHvYNg7Dg |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters