Coder Social home page Coder Social logo

svelte-esm-loader's Introduction

svelte-esm-loader

Experimental!

Node.js esmodules loader for Svelte, and SvelteKit.

This is primarily intended to be used along with uvu for testing svelte components using esm imports.

Usage

npm install --save-dev @jerrythomas/svelte-esm-loader@beta

Add the test script to your package.json

"script": {
    "test": "NODE_OPTIONS='--experimental-loader @jerrythomas/svelte-esm-loader' uvu test"
}

About

  • Set { type: 'module' } in your package.json.
  • Are using ESmodule import statements in your .js test files.
  • Don't mind experimental non-production code.

With this, you can:

  • Successfully import .svelte components
    • JS code will be compiled using svelte/compile.
    • If a custom config file exists, component will be pre-processed with svelte/preprocess and [svelte-preprocess][preprocess].
  • No-op import .css files without failure (helpful for testing).
    • Other asset file extensions from the preprocessor config (e.g. .postcss) will also be no-op imported without failure.
  • Successfully import from aliased paths ($lib, $app) in SvelteKit.
    • import { goto } from $app/navigation, will load successfully as a no-op.
    • import Count from $lib/Count.svelte will import from src/lib/Count.svelte
    • imports from custom aliases configured in svelte.config.js will work
  • Support directory import and import from files without extensions
    • import { something } from $lib/core will import from src/lib/core/index.js or src/lib/core.js
  • Utilities for rendering a component and firing events for testing

Simple

Here we have a simple Svelte component:

<script>
  // Component.svelte -- A simple example Svelte component to test.
  import './styles/layout.css'

  const star = 'Sun'
</script>

<div>
  <strong>{star}</strong>
</div>

<style>
  strong {
    color: orange;
  }
</style>

Node.js will ordinarily fail on the following import, as it doesn't know how to handle .svelte (and the included .css) files:

// Component.test.js -- Test a Svelte component.
import Component from './Component.svelte'

The same code will work successfully if we start Node.js with our loader:

NODE_OPTIONS="--experimental-loader @jerrythomas/svelte-esm-loader" npm run test

Complex

Here we have a more complex Svelte component, which requires preprocessing for it's advanced features:

<script>
  // Component.svelte -- A complex example Svelte component to test.

  // ADD: .postcss import
  import './styles/page.postcss'

  const star = 'Sun'
</script>

<!-- ADD: <template> tag from svelte-preprocess -->
<template>
  <div class="planet">
    <strong>{star}</strong>
  </div>
</template>

<!-- ADD: postcss w/nesting -->
<style lang="postcss">
  .planet {
    strong {
      color: orange;
    }
  }
</style>

We'll create a new custom config file to hold our [svelte-preprocess][preprocess] settings:

// svelte-preprocess.config.js -- A custom home for our preprocess settings.
export default {
  postcss: true,
}

And now we can have our advanced Svelte component compile correctly:

If you happen to use [SvelteKit][sveltekit], and don't want to repeat the processor settings, you can change your svelte.config.js to pull in the config from our custom file:

// svelte.config.js -- SvelteKit config file.
import sveltePreprocess from 'svelte-preprocess'

const { default: sveltePreprocessConfig } = await import(
  resolve('./svelte-preprocess.config.js')
)

export default {
  // ...,
  preprocess: [
    // ...,
    sveltePreprocess(sveltePreprocessConfig),
  ],
}

Notes

  • Importing .json files can be accomplished with experimental node flag --experimental-json-modules.
  • Leaving off the .js extension works.
  • You can import module folders, assuming that index.js exists in the folder.
  • Import aliases (from '$utils/draw.js') works. This relies on svelte.config.js.

References

svelte-esm-loader's People

Contributors

jerrythomas avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

svelte-esm-loader's Issues

Support Node 16.12

Hi there,

I noticed that you are using my package create-esm-loader. I just wanted to inform you that the loaders api has changed in Node 16.12, so I updated the package to add support for it.

If you want to support Node 16.12 as well, you will have to change

import createLoader from 'create-esm-loader';
export const {
  resolve,
  getFormat,
  getSource,
  transformSource,
} = createLoader({ ... });

to

import createLoader from 'create-esm-loader';
export const {
  resolve,
  getFormat,
  getSource,
  transformSource,
  load,
} = await createLoader({ ... });

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.