Components are undefined in HTML

[jimafisk]

The default starter now includes a content driven component example inspired by https://github.com/plentico/plenti/issues/9.

This works well once the page hydrates, but the fallback HTML shows undefined instead of the component.

[jimafisk]

https://github.com/sveltejs/sapper/issues/952

[jimafisk]

Tried rewriting slightly differently but it has the same issue:

layout/scripts/load_component.svelte

```svelte ```

layout/content/index.svelte

```svelte ```

Per https://svelte.dev/tutorial/onmount

lifecycle functions don't run during SSR, which means we can avoid fetching data that should be loaded lazily once the component has been mounted in the DOM

Edit: You don't need onMount in the snippet above ^, but the rewritten code still doesn't work in the static html:

(revised) layout/content/index.svelte

```svelte ```

[jimafisk]

It would be nice to eventually update the build script with https://github.com/sveltejs/svelte/issues/958

[jimafisk]

I took a look at https://github.com/sveltejs/svelte/pull/5476

- In a new plenti project, remove the Svelte package from npm: `sudo rm -R node_modules/svelte` - `git clone git@github.com:sveltejs/svelte.git node_modules/svelte` - **Note:** you can't build this inside a folder named `node_modules` modules, or you will get errors on `npm install`, so temp rename: `mv node_modules node_modules1`

Errors if install within node_modules folder

``` > svelte@3.29.4 tsd > tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly src/compiler/compile/css/Stylesheet.ts:379:2 - error TS2742: The inferred type of 'render' cannot be named without a reference to 'svelte/node_modules/magic-string'. This is likely not portable. A type annotation is necessary. 379 render(file: string, should_transform_selectors: boolean) { ~~~~~~ src/compiler/compile/nodes/Attribute.ts:78:2 - error TS2742: The inferred type of 'get_value' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 78 get_value(block) { ~~~~~~~~~ src/compiler/compile/render_dom/wrappers/Element/Attribute.ts:226:2 - error TS2742: The inferred type of 'get_value' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 226 get_value(block) { ~~~~~~~~~ src/compiler/compile/render_dom/wrappers/Element/Attribute.ts:255:2 - error TS2742: The inferred type of 'get_class_name_text' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 255 get_class_name_text(block) { ~~~~~~~~~~~~~~~~~~~ src/compiler/compile/render_dom/wrappers/Element/Attribute.ts:267:2 - error TS2742: The inferred type of 'render_chunks' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 267 render_chunks(block: Block) { ~~~~~~~~~~~~~ src/compiler/compile/render_dom/wrappers/Element/index.ts:372:2 - error TS2742: The inferred type of 'get_render_statement' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 372 get_render_statement(block: Block) { ~~~~~~~~~~~~~~~~~~~~ src/compiler/compile/render_dom/wrappers/Element/index.ts:391:2 - error TS2742: The inferred type of 'get_claim_statement' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 391 get_claim_statement(nodes: Identifier) { ~~~~~~~~~~~~~~~~~~~ src/compiler/compile/render_dom/wrappers/IfBlock.ts:595:2 - error TS2742: The inferred type of 'get_initial_dirty_bit' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 595 get_initial_dirty_bit() { ~~~~~~~~~~~~~~~~~~~~~ src/compiler/compile/render_dom/wrappers/shared/Tag.ts:27:2 - error TS2742: The inferred type of 'rename_this_method' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 27 rename_this_method( ~~~~~~~~~~~~~~~~~~ src/compiler/compile/render_dom/wrappers/shared/bind_this.ts:8:25 - error TS2742: The inferred type of 'bind_this' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 8 export default function bind_this(component: Component, block: Block, binding: BindingWrapper, variable: Identifier) { ~~~~~~~~~ src/compiler/compile/render_dom/wrappers/shared/get_slot_definition.ts:7:17 - error TS2742: The inferred type of 'get_slot_definition' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 7 export function get_slot_definition(block: Block, scope: TemplateScope, lets: Let[]) { ~~~~~~~~~~~~~~~~~~~ src/compiler/compile/utils/get_slot_data.ts:6:25 - error TS2742: The inferred type of 'get_slot_data' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 6 export default function get_slot_data(values: Map, block: Block = null) { ~~~~~~~~~~~~~ src/compiler/compile/utils/replace_object.ts:3:25 - error TS2742: The inferred type of 'replace_object' cannot be named without a reference to 'svelte/node_modules/@types/estree'. This is likely not portable. A type annotation is necessary. 3 export default function replace_object(node: Node, replacement: Node) { ~~~~~~~~~~~~~~ Found 421 errors. npm ERR! code 1 npm ERR! path /home/jimafisk/Desktop/test-site/node_modules/svelte npm ERR! command failed npm ERR! command sh -c tsc -p src/compiler --emitDeclarationOnly && tsc -p src/runtime --emitDeclarationOnly npm ERR! A complete log of this run can be found in: npm ERR! /home/jimafisk/.npm/_logs/2020-11-09T03_48_47_664Z-debug.log npm ERR! code 1 npm ERR! path /home/jimafisk/Desktop/test-site/node_modules/svelte npm ERR! command failed npm ERR! command sh -c rollup -c && npm run tsd npm ERR! A complete log of this run can be found in: npm ERR! /home/jimafisk/.npm/_logs/2020-11-09T03_48_47_712Z-debug.log npm ERR! code 1 npm ERR! path /home/jimafisk/Desktop/test-site/node_modules/svelte npm ERR! command failed npm ERR! command sh -c npm run build npm ERR! A complete log of this run can be found in: npm ERR! /home/jimafisk/.npm/_logs/2020-11-09T03_48_47_742Z-debug.log ```

- Go into svelte project folder: `cd node_modules1/svelte` - Install dependencies: `npm install` - Build a production version of the compiler: `npm publish` - Go back to plenti project root: `cd ../..` - Change the npm dependency folder back to the correct name: `mv node_modules1 node_modules` - Manually fix the issue of hydrating top level HTML: `nvim node_modules/svelte/internal/index.mjs` then change ~ line 188 to: ```js function insert(target, node, anchor) { if (target != document) { target.insertBefore(node, anchor || null); } } ``` - Now you can run the plenti build and webserver: `plenti serve`

This creates an array of filenames of components that were rendered during SSR called renderedComponents. We would have to update cmd/build/data_source.go to return this in v8go in this manner:

const { head, html, css, renderedComponents } = App.render({
    answer: 42
});

An earlier attempt at this feature has some details about use:

const { js } = //get test component, and apply custom filename option: compile(string, { filename: 'test' }
let Component = //turn JS into component
const { renderedComponents} = Component.render();

if(renderedComponents[0] !== 'test'){
 //fail test
}

Since we're compiling all the components manually in cmd/build/client.go we might be able to just leverage that to accomplish the same thing.

[jimafisk]

Related:

• Older conversation about lazy loading components: https://github.com/sveltejs/svelte/issues/640
  • The updated v3 syntax: https://github.com/sveltejs/svelte/issues/742#issuecomment-507301745
• SSR async component in JAMstack fashion: https://github.com/sveltejs/svelte/issues/5501

[jimafisk]

This should be working now using the allComponents prop introduced in v0.3.2.

I added some info about how to use this in a blog post in the default starter, but you can find more details in the docs here: https://plenti.co/docs/allComponents

[jimafisk]

Working link to docs: https://plenti.co/docs/allcomponents/

The allComponents prop is now allLayouts: https://plenti.co/docs/alllayouts