Skip to content
This repository has been archived by the owner on Jan 11, 2024. It is now read-only.

Commit

Permalink
Update Readme
Browse files Browse the repository at this point in the history
  • Loading branch information
NullVoxPopuli committed Mar 28, 2023
1 parent dfa720e commit bf84978
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 38 deletions.
5 changes: 5 additions & 0 deletions .changeset/tidy-beds-jog.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"rollup-plugin-glimmer-template-tag": minor
---

Invert (again) the 2-phase behavior. preprocessOnly will be try by default, and it can be set to false if you want single-file-configuration (at the cost of double babel parse). README has been updated accordingly
95 changes: 57 additions & 38 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,36 +19,54 @@ First and foremost, this repo's test-packages contain examples of

For specifics, the `packages/**` folder may provide value.

### Rollup
To use `<template>`, you need to change two files:
- rollup.config.mjs (where this plugin is used)
- babel.config.js / json / etc (where the `<template>` transform is finished)

### Rollup

The first step is add the rollup plugin, which will
understand the `<template>` tag `gjs` and `gts` files:

```js
// rollup.config.mjs
import { Addon } from '@embroider/addon-dev/rollup';

import { glimmerTemplateTag } from 'rollup-plugin-glimmer-template-tag';

const addon = new Addon({
srcDir: 'src',
destDir: 'dist'
});

export default {
output: addon.output(),
plugins: [
addon.publicEntrypoints(['components/**/*.js', 'index.js'<% if (typescript) {%>, 'template-registry.js'<% } %>]),
addon.appReexports(['components/**/*.js']),
addon.dependencies(),
glimmerTemplateTag(),
// ...
]
};
```diff
// rollup.config.mjs
import { Addon } from '@embroider/addon-dev/rollup';

+ import { glimmerTemplateTag } from 'rollup-plugin-glimmer-template-tag';

const addon = new Addon({
srcDir: 'src',
destDir: 'dist'
});

export default {
output: addon.output(),
plugins: [
addon.publicEntrypoints(['components/demo.js']),
addon.appReexports(['components/**/*.js']),
addon.dependencies(),
+ glimmerTemplateTag(),
// ...
]
};
```

And that's it!
### Babel

```diff
// babel.config.js / json / etc
'use strict';
module.exports = {
plugins: [
+ 'ember-template-imports/src/babel-plugin',
'@embroider/addon-dev/template-colocation-plugin',
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties'
]
};
```



### Configure `rollup-plugin-ts` (TS Only)

Expand Down Expand Up @@ -130,36 +148,37 @@ Without setting `transpileOnly: true` (using the default or explicitly setting t
Though, you could try to get around the issue if you _really_ want `transpileOnly: false` by `declare module`ing for `@ember/template-compilation` in your `unpublished-development-types` _except_ that `@ember/template-compilation` is not presently a real package, so the part of the error saying `Cannot find module ` is still true, even though a corresponding type declaration is defined -- both the module and the type declarations are needed.
### Manually choosing the two-stage transformation
### Manually choosing the single-stage transformation
There is an option available to the rollup plugin so that folks can choose to separately due to the two-step transform.
There is an option available to the rollup plugin so that folks can choose to attempt the full `<template>` transform in a single pass.
Normally, these are done wholly within the rollup plugin:
This would do both steps wholly within the rollup plugin:
1. preprocess the `<template>` tag into a secret internal format
2. convert that secret internal format into vanilla JS that a consuming build environment knows how to handle
However, for performance or compatibility reasons, it may not be desireable to allow both steps to be handled automatically.
However, for performance or compatibility reasons, it may not be desireable to allow both steps to be handled automatically -- babel will have to re-parse all your code again (for example, in `rollup-plugin-ts`).
You'd want these changes to your config files:
If you want to try out a rollup-only `<template>` transform, you'll want to want these changes to your config files:
```js
```diff
// rollup.config.mjs
export default {
output: addon.output(),
plugins: [
// ...
glimmerTemplateTag({ preprocessOnly: true }),
// ...
],
};
export default {
output: addon.output(),
plugins: [
// ...
- glimmerTemplateTag(),
+ glimmerTemplateTag({ preprocessOnly: false }),
// ...
],
};
```

```diff
// babel.config.js / json / etc
'use strict';
module.exports = {
plugins: [
+ 'ember-template-imports/src/babel-plugin',
- 'ember-template-imports/src/babel-plugin',
'@embroider/addon-dev/template-colocation-plugin',
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties'
Expand Down

0 comments on commit bf84978

Please sign in to comment.