Components are undefined in HTML

[jimafisk]

The default starter now includes a content driven component example inspired by #9.

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

[jimafisk]

sveltejs/sapper#952

[jimafisk]

Tried rewriting slightly differently but it has the same issue:

layout/scripts/load_component.svelte

<script context="module">
  export const loadComponent = component => {
    return import("../components/" + component + ".svelte").then(res => res.default).catch(err => null);
  }
</script>

layout/content/index.svelte

<script>
  export let title, intro, components, allNodes;
  import { loadComponent } from '../scripts/load_component.svelte';
  import { onMount } from 'svelte/internal';

  let result;
  onMount(async () => {
    for (const obj of components) {
      let compClass = await loadComponent(obj.component);
      result = await compClass;
    }
});
</script>

<svelte:component this="{result}" />

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

<script>
export let title, intro, components, allNodes;
import { loadComponent } from '../scripts/load_component.svelte';

let result;
(async () => {
  for (const obj of components) {
    result = await loadComponent(obj.component);
  }
})();
</script>

<svelte:component this="{result}" />

[jimafisk]

It would be nice to eventually update the build script with sveltejs/svelte#958

[jimafisk]

I took a look at sveltejs/svelte#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<string, Attribute>, 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:

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: Dynamic components sveltejs/svelte#640
  • The updated v3 syntax: <:Async> component sveltejs/svelte#742 (comment)
• SSR async component in JAMstack fashion: Top-level await sveltejs/svelte#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