Skip to content

Commit

Permalink
Merge branch 'main' into feat/qwikVite
Browse files Browse the repository at this point in the history
  • Loading branch information
@gioboa
gioboa committed Jun 19, 2024
2 parents d3083da + 2284b1a commit 502e26c
Show file tree
Hide file tree
Showing 54 changed files with 634 additions and 398 deletions.
3 changes: 3 additions & 0 deletions .github/CODEOWNERS
View file
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ README.md @QwikDev/docs-team @QwikDev/qwik-team
CONTRIBUTING.md @QwikDev/docs-team @QwikDev/qwik-team
CODE_OF_CONDUCT.md @QwikDev/docs-team @QwikDev/qwik-team

# For API changes
api.json @QwikDev/api-guards

# Protect the code owners file
.github/CODEOWNERS @mhevery @shairez

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/public/ecosystem/aws.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion packages/docs/src/repl/repl-options.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,8 @@ const StoreOption = (props: StoreOptionProps) => {

export const BUILD_MODE_OPTIONS = ['development', 'production'];

export const ENTRY_STRATEGY_OPTIONS = ['component', 'hook', 'single', 'smart', 'inline', 'hoist'];
// We don't support `inline` and `hoist` for client bundles
export const ENTRY_STRATEGY_OPTIONS = ['component', 'hook', 'single', 'smart'];

interface StoreOptionProps {
label: string;
Expand Down
40 changes: 9 additions & 31 deletions packages/docs/src/repl/repl-output-modules.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import { $, useStore, component$ } from '@builder.io/qwik';
import { $, component$, useSignal } from '@builder.io/qwik';
import { CodeBlock } from '../components/code-block/code-block';
import type { PathInView, ReplModuleOutput } from './types';
const FILE_MODULE_DIV_ID = 'file-modules-client-buisness';
import type { ReplModuleOutput } from './types';
const FILE_MODULE_DIV_ID = 'file-modules-client-modules';

export const ReplOutputModules = component$(({ outputs, headerText }: ReplOutputModulesProps) => {
const store = useStore<PathInView>({
selectedPath: outputs.length ? outputs[0].path : '',
});
const selectedPath = useSignal(outputs.length ? outputs[0].path : '');
const pathInView$ = $((path: string) => {
store.selectedPath = path;
selectedPath.value = path;
});
return (
<div class="output-result output-modules">
Expand All @@ -20,44 +18,24 @@ export const ReplOutputModules = component$(({ outputs, headerText }: ReplOutput
<a
href="#"
onClick$={() => {
const fileItem = document.querySelector(`[data-file-item="${i}"]`);
const fileItem = document.querySelector(`[data-output-item="${i}"]`);
if (fileItem) {
fileItem.scrollIntoView();
fileItem.scrollIntoView({ behavior: 'smooth' });
}
}}
class={{
'in-view': store.selectedPath && store.selectedPath === o.path,
'!hidden': true,
'md:!block': true,
}}
class={{ 'in-view': selectedPath.value === o.path }}
preventdefault:click
key={o.path}
>
{o.path}
</a>
<div class="block md:hidden">
<div class="file-item" data-file-item={i} key={o.path}>
<div class="file-info">
<span>{o.path}</span>
{o.size ? <span class="file-size">({o.size})</span> : null}
</div>
<div class="file-text">
<CodeBlock
pathInView$={pathInView$}
path={o.path}
code={o.code}
observerRootId={FILE_MODULE_DIV_ID}
/>
</div>
</div>
</div>
</div>
))}
</div>
</div>
<div class="file-modules" id={FILE_MODULE_DIV_ID}>
{outputs.map((o, i) => (
<div class="file-item" data-file-item={i} key={o.path}>
<div class="file-item" data-output-item={i} key={o.path}>
<div class="file-info">
<span>{o.path}</span>
{o.size ? <span class="file-size">({o.size})</span> : null}
Expand Down
40 changes: 9 additions & 31 deletions packages/docs/src/repl/repl-output-symbols.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
import type { TransformModule } from '@builder.io/qwik/optimizer';
import { CodeBlock } from '../components/code-block/code-block';
import { $, useStore, component$ } from '@builder.io/qwik';
import type { PathInView } from './types';
import { $, component$, useSignal } from '@builder.io/qwik';
const FILE_MODULE_DIV_ID = 'file-modules-symbol';

export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps) => {
const store = useStore<PathInView>({
selectedPath: outputs.length ? outputs[0].path : '',
});
const selectedPath = useSignal(outputs.length ? outputs[0].path : '');
const pathInView$ = $((path: string) => {
store.selectedPath = path;
selectedPath.value = path;
});

return (
Expand All @@ -22,45 +19,26 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps
<a
href="#"
onClick$={() => {
const fileItem = document.querySelector(`[data-file-item="${i}"]`);
const fileItem = document.querySelector(`[data-symbol-item="${i}"]`);
if (fileItem) {
store.selectedPath = o.path;
fileItem.scrollIntoView();
selectedPath.value = o.path;
fileItem.scrollIntoView({ behavior: 'smooth' });
}
}}
class={{
'in-view': store.selectedPath && store.selectedPath === o.path,
'!hidden': true,
'md:!block': true,
}}
class={{ 'in-view': selectedPath.value === o.path }}
preventdefault:click
>
{o.hook?.canonicalFilename}
</a>
<div class="block md:hidden">
<div class="file-item" data-file-item={i} key={o.path}>
<div class="file-info">
<span>{o.hook?.canonicalFilename}</span>
</div>
<div class="file-text">
<CodeBlock
pathInView$={pathInView$}
path={o.path}
code={o.code}
observerRootId={FILE_MODULE_DIV_ID}
/>
</div>
</div>
</div>
</div>
))}
</div>
</div>
<div class="file-modules hidden md:block" id={FILE_MODULE_DIV_ID}>
<div class="file-modules" id={FILE_MODULE_DIV_ID}>
{outputs
.filter((o) => !!o.hook)
.map((o, i) => (
<div class="file-item" data-file-item={i} key={o.path}>
<div class="file-item" data-symbol-item={i} key={o.path}>
<div class="file-info">
<span>{o.hook?.canonicalFilename}</span>
</div>
Expand Down
24 changes: 20 additions & 4 deletions packages/docs/src/repl/repl-output-update.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,30 @@
import type { ReplResult, ReplStore } from './types';

// TODO fix useStore to recursively notify subscribers
const deepUpdate = (prev: any, next: any) => {
for (const key in next) {
if (prev[key] && typeof next[key] === 'object' && typeof prev[key] === 'object') {
deepUpdate(prev[key], next[key]);
} else {
prev[key] = next[key];
}
}
for (const key in prev) {
if (!(key in next)) {
delete prev[key];
}
}
};

export const updateReplOutput = async (store: ReplStore, result: ReplResult) => {
store.diagnostics = result.diagnostics;

if (store.diagnostics.length === 0) {
store.html = result.html;
store.transformedModules = result.transformedModules;
store.clientBundles = result.clientBundles;
store.ssrModules = result.ssrModules;
store.events = result.events;
deepUpdate(store.transformedModules, result.transformedModules);
deepUpdate(store.clientBundles, result.clientBundles);
deepUpdate(store.ssrModules, result.ssrModules);
deepUpdate(store.events, result.events);

if (store.selectedOutputPanel === 'diagnostics' && store.monacoDiagnostics.length === 0) {
store.selectedOutputPanel = 'app';
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/src/repl/repl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,10 @@
.output-modules {
display: grid;
grid-template-areas: 'repl-file-tree repl-file-text';
@media screen and (max-width: 768px) {
grid-template-areas: 'repl-file-tree' 'repl-file-text';
}

height: 100%;
overflow: hidden;
@apply sm-grid-column;
Expand Down
4 changes: 0 additions & 4 deletions packages/docs/src/repl/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,3 @@ export type OutputPanel =
| 'diagnostics';

export type OutputDetail = 'options' | 'console';

export interface PathInView {
selectedPath: string;
}
2 changes: 1 addition & 1 deletion packages/docs/src/repl/worker/repl-server.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* - Source for url: "/repl/~repl-server-host.js"
* - Created from the route: "src/routes/repl/~repl-server.js/entry.ts"
* - Created from the route: "src/routes/repl/~repl-server-host.js/entry.ts"
* - Script executed from url: "/repl/~repl-server-host.html"
* - Public static html source file: "public/repl/~repl-server-host.html"
*/
Expand Down
4 changes: 2 additions & 2 deletions packages/docs/src/routes/api/qwik-optimizer/api.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,7 +400,7 @@
}
],
"kind": "Interface",
"content": "```typescript\nexport interface QwikManifest \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[bundles](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[fileName: string\\]: [QwikBundle](#qwikbundle)<!-- -->; }\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[injections?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[GlobalInjections](#globalinjections)<!-- -->\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[manifestHash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[mapping](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: string; }\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[options?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ target?: string; buildMode?: string; entryStrategy?: { \\[key: string\\]: any; }; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[platform?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[name: string\\]: string; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[symbols](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: [QwikSymbol](#qwiksymbol)<!-- -->; }\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[version](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
"content": "The metadata of the build. One of its uses is storing where QRL symbols are located.\n\n\n```typescript\nexport interface QwikManifest \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[bundles](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[fileName: string\\]: [QwikBundle](#qwikbundle)<!-- -->; }\n\n\n</td><td>\n\nAll code bundles, used to know the import graph\n\n\n</td></tr>\n<tr><td>\n\n[injections?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[GlobalInjections](#globalinjections)<!-- -->\\[\\]\n\n\n</td><td>\n\n_(Optional)_ CSS etc to inject in the document head\n\n\n</td></tr>\n<tr><td>\n\n[manifestHash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nContent hash of the manifest, if this changes, the code changed\n\n\n</td></tr>\n<tr><td>\n\n[mapping](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: string; }\n\n\n</td><td>\n\nWhere QRLs are located\n\n\n</td></tr>\n<tr><td>\n\n[options?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ target?: string; buildMode?: string; entryStrategy?: { \\[key: string\\]: any; }; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[platform?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[name: string\\]: string; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[symbols](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: [QwikSymbol](#qwiksymbol)<!-- -->; }\n\n\n</td><td>\n\nQRL symbols\n\n\n</td></tr>\n<tr><td>\n\n[version](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
"editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
"mdFile": "qwik.qwikmanifest.md"
},
Expand Down Expand Up @@ -644,7 +644,7 @@
}
],
"kind": "TypeAlias",
"content": "```typescript\nexport type SymbolMapperFn = (symbolName: string, mapper: SymbolMapper | undefined) => readonly [symbol: string, chunk: string] | undefined;\n```\n**References:** [SymbolMapper](#symbolmapper)",
"content": "```typescript\nexport type SymbolMapperFn = (symbolName: string, mapper: SymbolMapper | undefined, parent?: string) => readonly [symbol: string, chunk: string] | undefined;\n```\n**References:** [SymbolMapper](#symbolmapper)",
"editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
"mdFile": "qwik.symbolmapperfn.md"
},
Expand Down
13 changes: 12 additions & 1 deletion packages/docs/src/routes/api/qwik-optimizer/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1547,6 +1547,8 @@ _(Optional)_

## QwikManifest

The metadata of the build. One of its uses is storing where QRL symbols are located.

```typescript
export interface QwikManifest
```
Expand Down Expand Up @@ -1580,6 +1582,8 @@ Description

</td><td>

All code bundles, used to know the import graph

</td></tr>
<tr><td>

Expand All @@ -1593,7 +1597,7 @@ Description

</td><td>

_(Optional)_
_(Optional)_ CSS etc to inject in the document head

</td></tr>
<tr><td>
Expand All @@ -1608,6 +1612,8 @@ string

</td><td>

Content hash of the manifest, if this changes, the code changed

</td></tr>
<tr><td>

Expand All @@ -1621,6 +1627,8 @@ string

</td><td>

Where QRLs are located

</td></tr>
<tr><td>

Expand Down Expand Up @@ -1664,6 +1672,8 @@ _(Optional)_

</td><td>

QRL symbols

</td></tr>
<tr><td>

Expand Down Expand Up @@ -2758,6 +2768,7 @@ export type SymbolMapper = Record<
export type SymbolMapperFn = (
symbolName: string,
mapper: SymbolMapper | undefined,
parent?: string,
) => readonly [symbol: string, chunk: string] | undefined;
```

Expand Down
2 changes: 1 addition & 1 deletion packages/docs/src/routes/api/qwik/api.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -544,7 +544,7 @@
}
],
"kind": "Interface",
"content": "Low-level API for platform abstraction.\n\nDifferent platforms (browser, node, service workers) may have different ways of handling things such as `requestAnimationFrame` and imports. To make Qwik platform-independent Qwik uses the `CorePlatform` API to access the platform API.\n\n`CorePlatform` also is responsible for importing symbols. The import map is different on the client (browser) then on the server. For this reason, the server has a manifest that is used to map symbols to javascript chunks. The manifest is encapsulated in `CorePlatform`<!-- -->, for this reason, the `CorePlatform` can't be global as there may be multiple applications running at server concurrently.\n\nThis is a low-level API and there should not be a need for you to access this.\n\n\n```typescript\nexport interface CorePlatform \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[chunkForSymbol](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(symbolName: string, chunk: string \\| null) =&gt; readonly \\[symbol: string, chunk: string\\] \\| undefined\n\n\n</td><td>\n\nRetrieve chunk name for the symbol.\n\nWhen the application is running on the server the symbols may be imported from different files (as server build is typically a single javascript chunk.) For this reason, it is necessary to convert the chunks from server format to client (browser) format. This is done by looking up symbols (which are globally unique) in the manifest. (Manifest is the mapping of symbols to the client chunk names.)\n\n\n</td></tr>\n<tr><td>\n\n[importSymbol](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(containerEl: Element \\| undefined, url: string \\| URL \\| undefined \\| null, symbol: string) =&gt; [ValueOrPromise](#valueorpromise)<!-- -->&lt;any&gt;\n\n\n</td><td>\n\nRetrieve a symbol value from QRL.\n\nQwik needs to lazy load data and closures. For this Qwik uses QRLs that are serializable references of resources that are needed. The QRLs contain all the information necessary to retrieve the reference using `importSymbol`<!-- -->.\n\nWhy not use `import()`<!-- -->? Because `import()` is relative to the current file, and the current file is always the Qwik framework. So QRLs have additional information that allows them to serialize imports relative to application base rather than the Qwik framework file.\n\n\n</td></tr>\n<tr><td>\n\n[isServer](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\nTrue of running on the server platform.\n\n\n</td></tr>\n<tr><td>\n\n[nextTick](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(fn: () =&gt; any) =&gt; Promise&lt;any&gt;\n\n\n</td><td>\n\nPerform operation on next tick.\n\n\n</td></tr>\n<tr><td>\n\n[raf](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(fn: () =&gt; any) =&gt; Promise&lt;any&gt;\n\n\n</td><td>\n\nPerform operation on next request-animation-frame.\n\n\n</td></tr>\n</tbody></table>",
"content": "Low-level API for platform abstraction.\n\nDifferent platforms (browser, node, service workers) may have different ways of handling things such as `requestAnimationFrame` and imports. To make Qwik platform-independent Qwik uses the `CorePlatform` API to access the platform API.\n\n`CorePlatform` also is responsible for importing symbols. The import map is different on the client (browser) then on the server. For this reason, the server has a manifest that is used to map symbols to javascript chunks. The manifest is encapsulated in `CorePlatform`<!-- -->, for this reason, the `CorePlatform` can't be global as there may be multiple applications running at server concurrently.\n\nThis is a low-level API and there should not be a need for you to access this.\n\n\n```typescript\nexport interface CorePlatform \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[chunkForSymbol](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(symbolName: string, chunk: string \\| null, parent?: string) =&gt; readonly \\[symbol: string, chunk: string\\] \\| undefined\n\n\n</td><td>\n\nRetrieve chunk name for the symbol.\n\nWhen the application is running on the server the symbols may be imported from different files (as server build is typically a single javascript chunk.) For this reason, it is necessary to convert the chunks from server format to client (browser) format. This is done by looking up symbols (which are globally unique) in the manifest. (Manifest is the mapping of symbols to the client chunk names.)\n\n\n</td></tr>\n<tr><td>\n\n[importSymbol](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(containerEl: Element \\| undefined, url: string \\| URL \\| undefined \\| null, symbol: string) =&gt; [ValueOrPromise](#valueorpromise)<!-- -->&lt;any&gt;\n\n\n</td><td>\n\nRetrieve a symbol value from QRL.\n\nQwik needs to lazy load data and closures. For this Qwik uses QRLs that are serializable references of resources that are needed. The QRLs contain all the information necessary to retrieve the reference using `importSymbol`<!-- -->.\n\nWhy not use `import()`<!-- -->? Because `import()` is relative to the current file, and the current file is always the Qwik framework. So QRLs have additional information that allows them to serialize imports relative to application base rather than the Qwik framework file.\n\n\n</td></tr>\n<tr><td>\n\n[isServer](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\nTrue of running on the server platform.\n\n\n</td></tr>\n<tr><td>\n\n[nextTick](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(fn: () =&gt; any) =&gt; Promise&lt;any&gt;\n\n\n</td><td>\n\nPerform operation on next tick.\n\n\n</td></tr>\n<tr><td>\n\n[raf](#)\n\n\n</td><td>\n\n\n</td><td>\n\n(fn: () =&gt; any) =&gt; Promise&lt;any&gt;\n\n\n</td><td>\n\nPerform operation on next request-animation-frame.\n\n\n</td></tr>\n</tbody></table>",
"editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/platform/types.ts",
"mdFile": "qwik.coreplatform.md"
},
Expand Down
Loading

0 comments on commit 502e26c

Please sign in to comment.