guybedford / chomp-extensions Goto Github PK

Chomp template collection

License: MIT License

JavaScript 99.85% TypeScript 0.15%

chomp-extensions's Introduction

Chomp Extensions

Experimental core extensions for JS & frontend workflows.

This extensions library is available by default in Chomp core under the [email protected]: alias in the extensions list.

For example, using the SWC template extension:

chompfile.toml

version = 0.1

extensions = ['[email protected]:swc']

[[task]]
name = 'build'
target = 'lib/#.js'
dep = 'src/#.ts'
template = 'swc'

Contributions are encouraged and new template extensions will very likely be accepted.

The following extensions are currently included:

assert: Template for asserting the output of target or dependency of a task, useful for test tasks.
babel: Template for Babel compilation. The SWC template is highly recommended instead of Babel for performance.
footprint: Template for outputting file size charts for build summaries.
jspm: Template for JSPM import map generation.
npm: Template for initializing npm and ensuring packages are installed / npm install has been run.
ncc: Template for ncc Node.js builder.
prettier: Template for running Prettier.
replace: Template for source replacements.
rollup: Template for RollupJS compilation.
svelte: Template for Svelte. Just a prototype currently, contributions would be great.
swc: Template for the SWC compiler. Recommended for TypeScript / JSX / JS transpilation workflows with Chomp.
terser: Template for Terser minification

LICENSE

MIT

chomp-extensions's People

Contributors

Stargazers

Watchers

Forkers

jayakrishnanamburu zachsa aslemammad fairhopeweb alissaowens

chomp-extensions's Issues

Invalid template option suggestions

All templates should provide a list of valid options when passing an invalid option.

Error if @jspm/generator is in dependency tree

It's similar to jspm/generator#147.

The error occurs when @jspm/generator is in dependency graph and built using chomp jspm extension.
clearCache(); doesn't seem to work this time.

chomp build:error:html
  public/error.html invalidated
🞂 public/error.html
file:///Users/user/@jspm/jspm-generator-tests/node_modules/@jspm/generator/dist/generator-64b14857.js:1273
        throw new JspmError(`Unable to resolve package ${latestTarget.registry}:${latestTarget.name} to "${latestTarget.range}"${importedFrom(parentUrl)}`);
              ^

JspmError: Unable to resolve package npm:@babel/helpers to "^7.19.0" imported from https://ga.jspm.io/npm:@babel/[email protected]/lib/index.js
    at Resolver.resolveLatestTarget (file:///Users/user/@jspm/jspm-generator-tests/node_modules/@jspm/generator/dist/generator-64b14857.js:1273:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Installer.installTarget (file:///Users/user/@jspm/jspm-generator-tests/node_modules/@jspm/generator/dist/generator-64b14857.js:2179:24)
    at async TraceMap.resolve (file:///Users/user/@jspm/jspm-generator-tests/node_modules/@jspm/generator/dist/generator-64b14857.js:2606:27)
    at async TraceMap.visit (file:///Users/user/@jspm/jspm-generator-tests/node_modules/@jspm/generator/dist/generator-64b14857.js:2383:26)
    at async file:///Users/user/@jspm/jspm-generator-tests/node_modules/@jspm/generator/dist/generator-64b14857.js:2418:13
    at async Promise.all (index 13)
    at async TraceMap.visit (file:///Users/user/@jspm/jspm-generator-tests/node_modules/@jspm/generator/dist/generator-64b14857.js:2413:9)
    at async file:///Users/user/@jspm/jspm-generator-tests/node_modules/@jspm/generator/dist/generator-64b14857.js:2418:13
    at async Promise.all (index 6) {
  jspmError: true,
  code: undefined
}
x public/error.html [1.519082681s]
Unable to complete all tasks.

Terser versioning issue

Terser 4 requires a default import, while Terser 5 can work with a named import.

The problem is that the npm template doesn't properly handle this conflict if an existing Terser 4 is installed in the project.

We should ideally have a way of handling this.

With the rollup plugin, we could possibly have better defaults. Currently if forgetting to set any options, the output file mode breaks if the target is a directory. Perhaps if the target is a directory we detect that and default to dir mode?

Update prettier extension

The new watch-invalidation flag coming into chomp (guybedford/chomp#137) supports writing files in-place without restarting chomp workflows. Prettier requires this as files are edited in place.

Additionally, prettier now supports caching and the template should be updated to reflect that

JSPM multi-HTML mode

We should update the JSPM extension to support the new multi HTML output.

JSPM extension produces incorrect HTML in some cases

Input HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>A Title</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Output HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>False Bay forecast</title>
</head>
<body>
  <div id="root"></div>
</body>
</html<!-- Generated by @jspm/generator - https://github.com/jspm/generator -->
<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymous"></script>
<script type="importmap">
{}
</script>>

Chomp task

[[task]]
name = 'jspm'
dep = 'clients/pages/#/index.html'
target = 'server/ssr/dist/pages/#/index.html'
template = 'jspm'
[task.template-options]
env = ['browser', 'production', 'module']
preload = true
integrity = false

SWC extension doesn't seem to allow me to specify a .swcrc file

A simple chomp task where I run the SWC CLI directly works and picks up my .swcrc file:

[[task]]
name = 'build'
run = 'swc clients -d server/ssr/dist'

But trying to use the SWC extension, the .swcrc file seems to have no effect:

The templated task looks like this:

[[task]]
name = 'build:js'
template = 'swc'
target = 'server/react/dist/##.js'
deps = ['clients/##.js']
[task.template-options]
config-file = '.swcrc'

Ejecting the task, the result is this:

[[task]]
name = 'build:js'
targets = ['server/react/dist/##.js']
deps = [
    'clients/##.js',
    'npm:install',
]
stdio = 'stderr-only'
run = 'node ./node_modules/@swc/cli/bin/swc.js $DEP -o $TARGET --no-swcrc --config-file=.swcrc --source-maps -C jsc.parser.syntax=typescript -C jsc.parser.importAssertions=true -C jsc.parser.topLevelAwait=true -C jsc.parser.importMeta=true -C jsc.parser.privateMethod=true -C jsc.parser.dynamicImport=true -C jsc.target=es2016 -C jsc.experimental.keepImportAssertions=true'

It looks like the --no-swcrc arg is passed even though I specify a swcrc file. This seems like it may be an error to me, and results in the swcrc file not being used

Is it possible to configure environment variables at runtime?

Hi,

When using a template such as this:

[[task]]
name = 'jspm:node'
dep = '.cache/index.algoa-bay-forecast.js'
target = 'node.importmap'
template = 'jspm'
[task.template-options]
env = ['node', 'development', 'module']

I would like to configure the env at runtime:

ENV=development chomp jspm:node
# or
ENV=production chomp jspm:node

Then I would like to be able to use that environment variable - something along the lines of:

[[task]]
name = 'jspm:node'
dep = '.cache/index.algoa-bay-forecast.js'
target = 'node.importmap'
template = 'jspm'
[task.template-options]
env = ['node', '$ENV', 'module']

Sorry if this is possible already - if so I didn't see it in the docs