V1.0.0 (was going to be v0.2.0, but refactor got bigger)

[nickreese]

V1 Roadmap:

• remove support for hooks in route.js files.
• remove link from templates.
• remove customProps from Elder.js. Leave in customizeHooks.
• move the process of compiling HTML to a string to a hook named 'compileHtml' so that users can have full control of rendering of the html.
• reverse stack/hook priority
• update hooks.ts priority to match the reverse.

elder.config.js

• remove locations key in favor of srcDir, distDir, and rootDir
• all process.cwd() removed unless rootDir is not set, then it is called once to set it.
• warning when origin is not set.

Shortcodes:

• shortcode integration via a hook.
• async shortcode support.
• get shortcodes from shortcodes.js
• add shortcodes from plugins.
• make sure plugin context is available in shortcodes defined by plugins.
• helpers.shortcode added for easy inlining of shortcodes within svelte templates @html helpers.shortcode({name:'foo' props: {key: 'val'}, content: 'string'});

Rollup Config:

• Internalized with the same configuration as before.
• remove all process.cwd() in favor of the elder.config.js refactor.
• we now rollup plugin Svelte files.
• components can live in ./src/components/[name]/[Name].svelte or ./src/compontents/[Name].svelte

data function manipulation, prevent people from causing issues for themselves.

Server:

• Server now moved to hook so the implementation can be disabled, replaced, or extended.

Build:

• Builds now collect errors and properly write them to a log.

Other:

• useful errors when there are no permalinks due to not adding a request.route property when manipulating allRequests.

• validation for the data key when validating routes.

• route data functions have read only props. This keeps from things being broken unexpectedly.

• forked, meta-shortcodes to add async support, updated the test.

• show useful error on non-self closing tags in partialHydration.

• add allRequests to buildComplete hook

• moved Elder.js' express server into a function on the middleware hook.

• depreciating 'routeHTML' which is passed into 'Layout' svelte templates to be 'routeHtml'.

TODO Post Release:

• revisit all plugin hooks and make sure the priority isn't messed up.
• remove link from the template.
• update all plugins to use the new standardized elder.config.js and remove process.cwd()

To Document:

• shortcodes
• remove all mentions of typescript. Users should just have to setup their /build/ folder to match their srcDir and update their svelte preprocessor.

---

Upgrading to v1.0.0:

Below are the breaking changes between v1 and earlier versions:

1. link helper is removed from templates. You can access it at helpers.permalinks the same way as before so link.blog({slug: "foo"}) becomes helpers.permalinks.blog({slug: "foo"})
2. routeHtml or routeHTML in the Layout.svelte in the Elder.js template has been changed to templateHtml. If your getting no output from your templates this is your issue. Rename this variable and things should work again.
3. The order of stacks and hook priorities have been reversed. This may cause hooks to run out of order. Please look at your hooks. Before this update, hooks with a priority of 1 where the highest priority, now they are the lowest.
4. process.browser replacements in rollup.config are now 'process.env.componentType' which will return browser or server. Remember process.env variables are strings. so process.env.componentType === 'server' is the correct way to check if a component is rendering on the server.
5. There was a major rework to the elder.config.js. If you defined anything in the elder.config.js under the locations key you'll need to rework those into the distDir, srcDir, and rootDir.
6. siteUrl in elder.config.js was changed to origin and you'll get an error if you don't set it.
7. Remove automatic checking for a tsconfig. If you want to use typescript, please set your srcDir to the build folder found in your tsconfig.

File / Hook Changes:

1. The ./src/assets/ folder has been moved to ./assets/ (project root).
2. You'll need to update your copyAssetsToPublic hook as shown below.
3. You'll need to update your rollup.config.js to be updated as shown below.

  // hooks.js
  // replace your old copyAssetsToPublic
  {
    hook: 'bootstrap',
    name: 'copyAssetsToPublic',
    description:
      'Copies /src/assets/ to the assets folder defined in the elder.config.js. This function helps support the live reload process.',
    run: ({ settings }) => {
      // note that this function doesn't manipulate any props or return anything.
      // It is just executed on the 'bootstrap' hook which runs once when Elder.js is starting.

      // copy assets folder to public destination
      glob.sync(path.join(settings.rootDir, '/assets/**/*')).forEach((file) => {
        const parsed = path.parse(file);
        // Only write the file/folder structure if it has an extension
        if (parsed.ext && parsed.ext.length > 0) {
          const relativeToAssetsArray = parsed.dir.split('assets');
          relativeToAssetsArray.shift();

          const relativeToAssetsFolder = `.${relativeToAssetsArray.join()}/`;
          const p = path.parse(path.resolve(settings.distDir, relativeToAssetsFolder));
          fs.ensureDirSync(p.dir);
          fs.outputFileSync(
            path.resolve(settings.distDir, `${relativeToAssetsFolder}${parsed.base}`),
            fs.readFileSync(file),
          );
        }
      });
    },
  },

// replace your old rollup.config.js
const { getRollupConfig } = require("@elderjs/elderjs");
const svelteConfig = require("./svelte.config");

module.exports = [...getRollupConfig({ svelteConfig })];

---

Tests Needed

• The shortcode hook elderProcessShortcodes
• Test shortcode replacement.

---

Shortcodes for testing:

  {
    shortcode: 'numberOfPages',
    run: async ({ allRequests }) => {
      // allRequests represents 'request' objects for all of the pages of our site, if we know the length of that we know the length of our site.
      return {
        html: allRequests.length,
        // other values can be omitted.
      };
    },
  },

  {
    shortcode: 'box',
    run: async ({ content, props }) => {
      return {
        // this is what the shortcode is replaced with. You CAN return an empty string.
        html: `<div class="box ${props.class}">${content}</div>`,

        // This is added to the page's css through the cssStack. You probably want an external css file for most usecases.
        css: '.box{border:1px solid red; padding: 1rem; margin: 1rem 0;} .box.yellow {background: lightyellow;}',

        // Javascript that is added to the footer via the customJsStack.
        js: '<script>var test = true;</script>',

        // Arbitrary HTML that is added to the head via the headStack
        head: '<meta test="true"/>',
      };
    },
  },

[nickreese]

@halafi Moved the majority of the server implementation to a hook so it can easily be overwritten, customized, or whatever users want to do. Tests there are failing :/

Done