Support Rollup and ES5

First of all thanks for the lib 😃 It looks very promising, but I struggle getting it to work in my rollup based project where I use ES5 modules.

Disclaimer: Maybe I am missing something essential, as I am new to this whole js module mess. However, other libraries work out of the box for me after importing them in a sapper project (i.e. nodejs framework for svelte). So that is why I still figure this could be an issue in the wildcard-api package.

I do the module conversion with the below rollup.config.js using the commonjs and node-resolve packages.

I played around with the preferBuiltins args of resolve() and commonjs(), but no luck…

It keeps complaining about: Error resolving module specifier: util in the client after calling the endpoint id = await wildcard.endpoints.getHelloWorldId(); (Sidenote: also import {endpoints} from '@wildcard-api/client'; as used in the examples, does not work for me, only when I do import wildcard from '@wildcard-api/client'; and use its endpoints property).

Also the build prints the warnings:

'util' is imported by node_modules/@brillout/assert/log.js, but could not be resolved – treating it as an external dependency
'util' is imported by util?commonjs-external, but could not be resolved – treating it as an external dependency
'util' is imported by node_modules/reassert/log.js, but could not be resolved – treating it as an external dependency

But when I add && typeof window === 'undefined' to @brillout/assert/utils/isNodejs.js and reassert/utils/isNodejs.js, those build warnings go away, but not the error caught by the client

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import commonjs from 'rollup-plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';

const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;

const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
const dedupe = importee => importee === 'svelte' || importee.startsWith('svelte/');

export default {
    client: {
        input: config.client.input(),
        output: config.client.output(),
        plugins: [
            replace({
                'process.browser': true,
                'process.env.NODE_ENV': JSON.stringify(mode)
            }),
            svelte({
                dev,
                hydratable: true,
                emitCss: true,
                preprocess: sveltePreprocess({ postcss: true }),
            }),
            resolve({
                browser: true,
                dedupe,
                preferBuiltins: true,
                customResolveOptions: {

                    moduleDirectory: 'node_modules'

                }
            }),
            commonjs({}),

            legacy && babel({
                extensions: ['.js', '.mjs', '.html', '.svelte'],
                runtimeHelpers: true,
                exclude: ['node_modules/@babel/**'],
                presets: [
                    ['@babel/preset-env', {
                        targets: '> 0.25%, not dead'
                    }]
                ],
                plugins: [
                    '@babel/plugin-syntax-dynamic-import', ['@babel/plugin-transform-runtime', {
                        useESModules: true
                    }]
                ]
            }),

            !dev && terser({
                module: true
            })
        ],

        onwarn,
    },

    server: {
        input: config.server.input(),
        output: config.server.output(),
        plugins: [
            replace({
                'process.browser': false,
                'process.env.NODE_ENV': JSON.stringify(mode)
            }),
            svelte({
                generate: 'ssr',
                dev,
                emitCss: true,
                preprocess: sveltePreprocess({ postcss: true }),
            }),
            resolve({
                dedupe,
                preferBuiltins: true,
            }),
            commonjs({preferBuiltins: true})
        ],
        external: Object.keys(pkg.dependencies).concat(
            require('module').builtinModules || Object.keys(process.binding('natives'))
        ),

        onwarn,
    }
};

On another note, there are more warnings when building the client:

Circular dependency: node_modules/@brillout/format-text/index.js -> node_modules/reassert/warning.js -> node_modules/reassert/assert.js -> node_modules/@brillout/format-text/index.js
Circular dependency: node_modules/@brillout/format-text/index.js -> node_modules/reassert/warning.js -> node_modules/reassert/assert.js -> /home/malte/Dokumente/zeug/stage-2/svelte-start/node_modules/@brillout/format-text/index.js?commonjs-proxy -> node_modules/@brillout/format-text/index.js
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
67:         return str.length;
68:     }
69:     const stringWidth = eval('require')('string-width');
                            ^
70:     return stringWidth(str);
71: }
Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
21:   // we use `eval('require')` instead of `require` to
22:   // make sure that webpack doesn't bundle `node-fetch`
23:   fetch = eval('require')('node-fetch');
              ^
24: }

EDIT: The above errors disappeared after using the rollup plugins

import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';

for the client. However now the client simply catches the error: “require is not defined”

[brillout]

node 13 does enable ES module

Neat. I’ll consider re-writing everything with ES modules then.

I’ll try to patch wildcard-api

Any luck on that? We can do it together if you want; let me know how things go and I’ll help whenever I can.

its more chat-app like

I see. If you don’t need SSR then yea don’t use Goldpage.

But since mobile is so important I still try to keep the footprint down as I go.

I know that svelte is marketing itself as mobile performant. Does svelte deliver on that promise? I’m curious.

Thank you very much for the advises!

I like our discussion 😃

[brillout]

Let me know if you still run into problems.