npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

livescript-transform-esm

v3.1.0

Published

Livescript plugin enabling es modules in generated code

Downloads

115

Readme

Transform for livescript adding support for modules.

Repository on github

Usage

CLI

First install livescript and transfrom-esm

npm i -D https://github.com/gkz/LiveScript livescript-transform-esm

to transpile from src to tmp

node_modules/.bin/lsc -r livescript-transform-esm/register -c -o tmp src

to run script use CommonJS module format option e.g. running test/index.ls

node -r livescript-transform-esm/register/cjs -c -o tmp src

Features

This plugin comes equiped with some extra features which won't be seen in js-land any time soon.

Injecting imports to scope

Tired of manual polluting scope with hundreds of identifiers, let compiler do it for you. (for now only relative module are resolved)

import ...
    './symbols'
import 
    './symbols' : ...

both generate

import { init, create } from './symbols';

Globs/wildcards

Importing multiple files never was so easy, you can pass any string compatible with globby and compiler will do the rest. Globs are expanded during compilation making them transparent for other tools and browser.

import 'modules/**'
import foo from './modules/foo';
import Math from './modules/Math';
import Vector from './modules/Vector';

glob + exports = index

If you've ever wanted to generated index file base on content of directory it is trivial with this plugin, take export, import, some glob mix the together and here you have:

# inside of modules there are: foo.ls, Match.ls, Vector.ls
export { import './modules/**' }
import import$ from './modules/foo';
import import1$ from './modules/Math';
import import2$ from './modules/Vector';
export { import$ as foo }
export { import1$ as Math }
export { import2$ as Vector }

imports as expressions

Guys in js-land need to put imports into top scope otherwise its gives theme nice shinny error. But we don't like to obey those silly rules and we can but imports wherever it will make sense.

export default config =
    plugins: [
        import \livescript-transform-object-create
        import \livescript-transform-esm
        import \livescript-transform-implicit-async
        import \livescript-transform-object-create/lib/plugin
        import \livescript-transform-esm/lib/plugin
        import \livescript-transform-implicit-async/lib/plugin
    ]
import import$ from 'livescript-transform-object-create';
import import1$ from 'livescript-transform-esm';
import import2$ from 'livescript-transform-implicit-async';
import import3$ from 'livescript-transform-object-create/lib/plugin';
import import4$ from 'livescript-transform-esm/lib/plugin';
import import5$ from 'livescript-transform-implicit-async/lib/plugin';
var config;
export { config as default }
config = {
  plugins: [import$, import1$, import2$, import3$, import4$, import5$]
};

dynamic imports

A riddle: how to make dynamic import?
Answer: async it

foo = async import \./modules/foo
vector-path = \./modules/Vector
Vector = async import vector-path
var foo, vectorPath, Vector;
foo = import('./modules/foo');
vectorPath = './modules/Vector';
Vector = import(vectorPath);

import all

import all
    \react
    \./symbols
import * as symbols from './symbols';
import * as react from 'react';

Integration

Atom

If you are using Atom editor you may be interested in my packages which provide realtime code preview supporting this plugin.

Webpack loader

If you are using Webpack you can try my loader whith support for this and other plugins.

License

BSD-3-Clause