QwikDev · mhevery · Jun 22, 2023 · Jun 22, 2023
@@ -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",
+  }
+}
+```
@@ -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,
+        }),
+      }), 
+      //...
+    ],
+    // ...
+  };
+});
+```
@@ -35,6 +35,11 @@
 - [API reference](/docs/(qwikcity)/api/index.mdx)
 - [Deprecated Features](/docs/(qwikcity)/qwikcity-deprecated-features/index.mdx)
 
+## Qwik Labs 🧪
+
+- [Overview](/docs/labs/index.mdx)
+- [Insights](/docs/labs/insights/index.mdx)
+
 ## Integrations
 
 - [Overview](integrations/index.mdx)

@@ -0,0 +1,2 @@
+PRIVATE_LIBSQL_DB_URL=libsql://qwik-bundalyzer-mhevery.turso.io
+PRIVATE_LIBSQL_DB_API_TOKEN=eyJhbGciOiJFZERTQSIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2ODcyMTQxNTAsImlkIjoiMGU3NDI3ZjYtMGVlMy0xMWVlLThkYTctYmViOGE0ZTk3MTE3In0.Q2aMD5rP4TpLBTSPxp2eVPgd-CLFiVIzz81bOEk0h4go0KgyIpa38WHJhvg5Dn_978VeE3bthwv1BrHvYNg7Dg
@@ -4,5 +4,8 @@
 *.
 dist
 node_modules
+<<<<<<< HEAD
 lib
-lib-types
+lib-types
+=======
+>>>>>>> 2bc94b254 (chore: create `@builder.io/qwik-labs`)
@@ -24,7 +24,7 @@ const srcRepoRef = 'https://github.com/BuilderIO/qwik/commit/';
   });
   const finishQwikLabs = await prepare({
     buildRepo: 'qwik-labs-build',
-    artifactsDir: join(root, 'packages', 'qwik-labs', 'lib'),
+    artifactsDir: join(root, 'packages', 'qwik-labs'),
   });
   await finishQwik();
   await finishQwikCity();
@@ -39,7 +39,7 @@ async function prepare({ buildRepo, artifactsDir }: { buildRepo: string; artifac
     return () => null;
   }
   console.log(
-    'preparing to save artifacts to ' + artifactsDir + ' into BuilderIO/' + buildRepo + ' repo.'
+    'preparing to save artifacts from ' + artifactsDir + ' into BuilderIO/' + buildRepo + ' repo.'
   );
   const buildRepoDir = join(root, 'dist-dev', buildRepo);
   const repo = token
@@ -113,9 +113,10 @@ async function $(cmd: string, ...args: string[]): Promise<string> {
 }
 
 async function expand(path: string): Promise<string[]> {
-  const { stdout } = await execa('ls', [path]);
+  const { stdout } = await execa('ls', ['-a', path]);
   const paths = String(stdout)
     .split('\n')
+    .filter((v) => v !== '.' && v !== '..' && v !== '.git')
     .map((file) => path + '/' + file.trim());
   return paths;
 }