Changing svelte preprocess options don't do anything

[matthew-ia]

Sounds like this is because cayo used svelte/register, which doesn't support svelte-preprocess: sveltejs/svelte#3690

[matthew-ia]

Related: sveltejs/component-template#8

I'll have to use svelte.preprocess and then, rather than using svelte/register, I'll have to refactor to use svelte.compile (with generate: 'ssr', so I get a class with a .render() method, like svelte/register gives).

Note: I think I'll only have to do this preprocess > compile workflow for pages, and Cayo components. (I expect all components used within a page I expect should be preprocessed too?)

Something like this might work, which is based on this:

// some psuedo code
import { preprocess, compile } from 'svelte/compiler';
import sveltePreprocess from 'svelte-preprocess';
import * as fs from 'fs';
import { Renderer } from './lib/renderer.js';
// pretend we are getting the Template component the same was as the page components below
import { Template } from '/path/to/template.js';

const renderer = new Renderer(Template);

let source = fs.readFile('/path/to/pages/index.svelte');
let preprocessedPage;
await preprocess(source, sveltePreprocess(), { filename: 'Button.svelte' }).then(page => {     
  const {
    js,
    css,
    warnings,
    stats 
  } = compile(page, {
    generate: 'ssr', 
    dev: true, // probably want this
    hydratable: false, // this is default, may need to be changed just fo Cayo components
    preserveComments: true, // optional, may be useful for dev
    preserveWhitespace: true, // optional, may be useful for dev  
  });

  // do some helpful stuff with warnings and stats
  
  // first arg is the "page" object; page object would have some other stuff too, but for sake of brevity,
  // we're just passing the JS class we got from svelte.compile
  const content = renderer.render({ js }, config);
  // processPage comes next..., etc.

});

This is assuming the dependent code in cayo/lib is refactored to support the internal page objects with a js property, the Renderer class could be refactored to expect to use it to render the components and stay mostly the same:

// render.js: class Renderer
   render(page, config) {
    const { css: cssOptions } = config;
    // const { Component } = page;
    const { js: Component } = page;
    const { html, css, head } = Component.render();
    // do same stuff with html, css, head, etc...
   }

Also, the way getPages in cayo.js works with the generated file .cayo/pages.js needs to be entirely reworked so it uses the preprocess > compile workflow. Since we'll already have the pages as an JS class objects, I don't think the .cayo/pages.js or even .cayo/components.js files will be needed at all. After all, those were just temporary steps to get the Svelte components as objects.

[matthew-ia]

Now that we're using rollup, this should be able to be fixed now; just gotta pass the right config options down to the bundle options in core/bundle.js.

[matthew-ia]

Related to #37

[matthew-ia]

Closing since #37 closed. This should be fixed by the work for that.