Skip to content

Provides custom Javascript evaluation contexts and the Svelte Compiler as Svelte Stores, for REPLs, IDEs, etc.

License

Notifications You must be signed in to change notification settings

novacbn/svelte-pipeline

Repository files navigation

svelte-pipeline

Description

Provides custom Javascript contexts and the Svelte Compiler as Svelte Stores, for REPLs, Editors, etc.

IMPORTANT: As this package includes the Svelte Compiler as a dependency, it seriously balloons the size of the distributables and bundles.

Demo

See a demo of the REPL Components at kahi-ui.nbn.dev/playground.

Usage

Javascript

import {pipeline_javascript} from "@novacbn/svelte-pipeline";

function add(a, b) {
    return a + b;
}

// `svelte-pipeline` allows us to define custom globals for scripts to access
const CONTEXT = {
    add: add,
};

// `svelte-pipeline` also allows us to define an import map so scripts can import via `require`
const IMPORTS = {
    mymath: {
        add: add,
    },
};

// Here we can define the script source code we want to pass through the pipeline
const SCRIPT = `// First, we need to import our custom import
const mymath = require("mymath");

// Next, use the exposed context and export the sum
exports.sum = add(1, 2);

// Then, use the imported module to also export a sum
exports.sum_import = mymath.add(2, 2);`;

// Finally, we can use all the options we defined to create our pipeline as a Svelte Store
const store_javascript = pipeline_javascript({
    // Pass in our custom globals
    context: CONTEXT,

    // And pass in our custom import map
    imports: IMPORTS,
});

// Next we can listen for everytime our script is passed through the pipeline
store_javascript.subscribe((result) => {
    if (result.type === PIPELINE_RESULT_TYPES.error) {
        // If we get the result and it turns out to be an error, we always get
        // back a descriptive error from the Javascript environment / Svelte Compiler
        console.log(result.message);
        return;
    }

    // Whenever the pipeline had a successful result, we can get the resulting module context
    const {module} = result;

    // And then of course, we can also access the exported members of the script
    const {sum, sum_import} = module.exports;
    console.log({sum, sum_import}); // prints `{sum: 3, sum_import: 4}`
});

// And finally, to pass our script into the pipeline. We just set the value like any other Svelte Store
store_javascript.set(SCRIPT);

Svelte

import {pipeline_svelte} from "@novacbn/svelte-pipeline";

// First we need to define the Svelte Component source code we want to pass through the pipeline
const COMPONENT = `<script>
    export let count = 0;

    function on_click(event) {
        count += 1;
    }
</script>

<h1>Count: {count}</h1>
<button on:click={on_click}>Add +1</button>`;

// Just like the Javascript sample, we can pass in all the sample configuration options
const store_svelte = pipeline_svelte({
    compiler: {
        // We can also use the `.compiler` member to pass options into the Svelte Compiler
        // See `svelte.compile` options at: https://svelte.dev/docs#svelte_compile
    },
});

store_svelte.subscribe((result) => {
    if (result.type === PIPELINE_RESULT_TYPES.error) {
        console.log(result.message);
        return;
    }

    // Unlike the Javascript pipeline however, successful Svelte pipeline results have the
    // compiled Svelte Components export to `module.exports.default`
    const {module} = result;
    const Component = module.exports.default;

    // Which we can use programatically like any other Svelte Component
    const component = new Component({
        target: document.body,
        props: {
            count: "42",
        },
    });

    // If available, successful Svelte results also supply their compiled CSS Stylesheets
    if (result.stylesheet) {
        const stylesheet = document.createElement("style");
        stylesheet.innerText = result.stylesheet;

        document.head.appendChild(stylesheet);
    }
});

// And same as Javascript sample, we just set the Svelte Store
store_svelte.set(COMPONENT);

Components

...

Developer

Installation

Open your terminal and install via npm:

npm install @novacbn/svelte-pipeline

Main API

import {...} from "@novacbn/svelte-pipeline";

  • Actions

    • component
    • stylesheet
  • Stores

    • pipeline_javascript
    • pipeline_svelte
  • Enumerations

    • PIPELINE_RESULT_TYPES
  • Utilities

    • evaluate_code
    • make_require
    • validate_code
    • validate_svelte

Components API

import {...} from "@novacbn/svelte-pipeline/components";

  • Components

    • PipelineRenderComponent

About

Provides custom Javascript evaluation contexts and the Svelte Compiler as Svelte Stores, for REPLs, IDEs, etc.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published