embroider-build / addon-blueprint Goto Github PK
View Code? Open in Web Editor NEWBlueprint for v2-formatted Ember addons
License: MIT License
Blueprint for v2-formatted Ember addons
License: MIT License
Seen this in one of my addons, but also happening here in CI.
This is happening because of some sloppy dependency handling in plugin-rollup-ts
, as it tries to resolve these babel blugins without actually declaring any dependency whatsoever on them. I guess this accidentally worked because of some looseness of package managers, where some other dependency brought those in. Strangely enough that was even the case for pnpm!
This was only popping up now (when ignoring the lockfile!), presumably because those other dependencies changed something to not make those plugins resolvable anymore..
As already reported in wessberg/rollup-plugin-ts#189 long time ago, using these plugins shouldn't actually happen at all. So I hope landing this PR will actually fix both issues.
Also reported upstream here, posting here for visibility.
When adding the addon created via the blueprint as a dependency in the package.json file using the form:
"addon-name": "https://github.com/name/repo-name#dist
Yarn complains with the following error:
Packing addon-name@https://github.com/name/repo.git#commit=commitSha from sources
No package manager configuration detected; defaulting to Yarn
yarn pack v1.22.19
$ rollup --config
/bin/sh: rollup: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/pack for documentation about this command.
Releasing v2 addon is not entirely trivial, so would be good to have a way to tell folks how to do this.
cd my-addon-git-repo
cd my-addon # because v2 folder nesting
yarn version && yarn publish
Given that people might prefer variety of tools (yarn / npm / ...) it might be a good idea to document this in *.md file, so that people can follow & adapt.
Proposal:
having a flag like #9 would be really good.
Here is the error I got:
ember addon my-addon -b ../NullVoxPopuli/addon-blueprint/
# ....
Error creating new application. Removing generated directory `./my-addon`
Command failed with ENOENT: create-rwjblue-release-it-setup --no-install
spawn create-rwjblue-release-it-setup ENOENT
Stack Trace and Error Report: /tmp/error.dump.db9873fe8c3dfb583cc98606cb31108f.log
when this error occurs, the addon directory is removed.
Reproduction:
Make a new addon using the --typescript
flag.
Paste this code into the addon's index.ts
:
export class Example {
declare myField: string;
}
Run the addon's build. You get this error:
SyntaxError: /Users/edward/hacking/v2-example/v2-example/src/index.ts: TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript.
If you have already enabled that plugin (or '@babel/preset-typescript'), make sure that it runs before any plugin related to additional class features:
- @babel/plugin-proposal-class-properties
- @babel/plugin-proposal-private-methods
- @babel/plugin-proposal-decorators
1 | export class Example {
> 2 | declare myField: string;
| ^^^^^^^^^^^^^^^^^^^^^^^^
3 | }
4 |
I'm not sure exactly how to fix this while still using the typescript preset, because you can't interleave presets and plugins. As far as I know, the plugins always run before the presets.
I think that the clean
we have in the rollup config causes transient-but-noisy build errors in the test-app. Because it starts the build by removing everything in dist, the test-app can rebuild and find things missing and get build and/or type errors.
This seems better if you remove clean. The downside is that there is no automatic removal of build artifacts if you really do delete something from your source.
Using the --pnpm flag correctly produces a ppm-workspace.yaml file, but the actual package install runs yarn.
I ran:
ember addon glimmer-scoped-css -b @embroider/addon-blueprint --pnpm --typescript
Using
ember-cli: 4.10.0
node: 16.19.0
os: darwin arm64
The output shows yarn running and produces a yarn.lock file and not a pnpm lock file.
Out of the box, yarn test
at the top-level emits a confusing warning because it runs the test
script in every package and the test
script in the addon just echos a warning.
Also, the current setup runs linting in CI twice, because it runs both yarn lint
as a dedicated step, but also includes linting in the test-app's test
script.
When using dependenciesMeta.*.injected (ie: the most correct way to manage in-repo dependencies, as it simulates what would happen when installed from npm), you need a too like this: https://github.com/NullVoxPopuli/pnpm-sync-dependencies-meta-injected
however buying in to that tool, and using turbo to manage it, is def out of scoped for a blueprint project.
so, I'm planning on making another blueprint that applies recommended turbo + pnpm configurations (for at least my projects anyway) -- NullVoxPopuli/ember-apply#463
Goals:
Suggest to move README.md
, LICENSE.md
and CHANGELOG.md
from the repository root into the ./packages/__name__
directory.
In doing so, the three files will be picked up by npm pack
and npm publish
respectively, so that the npmjs.com listing shows
the proper README.md
instead of an error message about missing readme, and so that these files are also available in the users node_modules
.
We should also add symlinks from the old location to the new location (I wonder if blueprints can contain symlinks), so that GitHub still renders the repository overview correctly. It's important, that the files are physically moved instead of just symlinked into the package, as npm pack
doesn't follow symlinks.
CONTRIBUTING.md
should not be moved, as it's only relevant in the context of the repository.
The build:types
script from #136 (i.e. glint --declaration
) did not work for ember-container-query
. I noticed that the declarations
folder is missing entirely.
I looked into what the scripts should be, so that they work for both tsc
and glint
cases:
/* package.json for projects with Glint */
"scripts": {
"build:types": "glint --build",
"lint:types": "glint --project tsconfig.development.json",
"start:types": "glint --declaration --watch", // ideally, we can run just `glint --watch`
}
/* package.json for projects without Glint */
"scripts": {
"build:types": "tsc --build",
"lint:types": "tsc --project tsconfig.development.json",
"start:types": "tsc --watch"
}
/* tsconfig.json */
{
"extends": "@tsconfig/ember/tsconfig.json",
"compilerOptions": {
"declaration": true,
"declarationDir": "declarations",
"emitDeclarationOnly": true,
"noEmit": false
},
"include": [
"src/**/*",
"unpublished-development-types/**/*"
]
}
/* tsconfig.development.json */
{
"extends": "@tsconfig/ember/tsconfig.json",
"compilerOptions": {
"declaration": true,
"declarationDir": "declarations"
},
"include": [
"src/**/*",
"unpublished-development-types/**/*"
]
}
I'd prefer to see something like this be opt-in (or at least opt-out-able ๐)
I'm a happy user of release-it
in OSS projects in general, but at work we have a whole set of internal infrastructure that manages package releases, and if possible I'd like to avoid having to document that folks need to manually undo the results of running rwjblue-release-it-setup
in freshly-generated addons.
Originally posted by @dfreeman in #4 (comment)
It seems once you create the addon the build fails immediately due to there being no hbs files to lint. I think we should either A) add a hbs file so it passes or B) remove the hbs linting step and let the user add it in
A few of us have had a number of problems with rollup-plugin-ts over time.
Most recently, a removal here: embroider-build/embroider#1510
One strategy that I've done is to compile everything with babel, and compile types in a separate process.
For folks that don't have gjs/gts they can use @rollup/plugin-typescript
and have that plugin generate the types for them.
@rollup/plugin-typescript
provides transformer options -- but because we transform gjs/gts files via a pre-parse-transformer (provided by ember-template-imports for the most part), we don't (yet?) have a way to use @rollup/plugin-typescript
(it errors on gts imports, which you'd normally solve by adding @rollup/plugin-node-resolve
, but tsc
doesn't respect that plugin (it also wouldn't solve the transform of <template>
issue).
So, what I've found that works is:
which, alone isn't sufficient, because we remove the dist
folder via addon.clean()
.
but, we can make inline plugins, so I've done this for my latest rollup config:
import copy from 'rollup-plugin-copy';
import { babel } from '@rollup/plugin-babel';
import { Addon } from '@embroider/addon-dev/rollup';
import { glimmerTemplateTag } from 'rollup-plugin-glimmer-template-tag';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import { execa } from 'execa';
const addon = new Addon({
srcDir: 'src',
destDir: 'dist',
});
const extensions = ['.js', '.ts', '.gts', '.gjs', '.hbs', '.json'];
export default {
output: addon.output(),
plugins: [
addon.publicEntrypoints(['**/*.js']),
addon.appReexports(['components/*.js', 'helpers/**/*.js']),
addon.dependencies(),
addon.hbs(),
glimmerTemplateTag(),
nodeResolve({ extensions }),
babel({ extensions, babelHelpers: 'inline' }),
addon.keepAssets(['**/*.css']),
{
name: 'generate type declarations',
async writeBundle() {
await execa('glint', ['--build']);
},
},
addon.clean(),
copy({
targets: [
{ src: '../README.md', dest: '.' },
{ src: '../LICENSE.md', dest: '.' },
],
}),
],
};
and for my tsconfig.json:
{
"extends": "@tsconfig/ember/tsconfig.json",
"include": ["src/**/*", "unpublished-development-types/**/*"],
"glint": {
"environment": ["ember-loose", "ember-template-imports"]
},
"compilerOptions": {
"declarationDir": "dist",
"emitDeclarationOnly": true,
"noEmit": false
}
}
and for my babel:
'use strict';
module.exports = {
presets: ['@babel/preset-typescript'],
plugins: [
['@babel/plugin-transform-typescript', { allowDeclareFields: true }],
'ember-template-imports/src/babel-plugin',
'@embroider/addon-dev/template-colocation-plugin',
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-class-properties',
],
};
So... this works, but it's obviously not as performant as we'd like. At the end of each build, we boot up a whole typescript/glint compile -- thankfully tsc/glint has a cache, but we still pay boot/parse/cache-check time that we otherwise wouldn't pay if we had a native watch integration with rollup.
My IDE (with prettier on-save enabled) keeps on formatting the any file (as expected), but this causes eslint errors to pop up, related to prettier-eslint integration. So it seems eslint uses a different prettier config than what is configured in our .prettierrc.js
. And indeed these configs are hardcoded here: https://github.com/NullVoxPopuli/eslint-configs/blob/main/configs/base.js#L97.
At the very least we should make our .prettierrc.js
match these settings. But I think actually the eslint plugin should just take whatever prettier config the project has!?
Provide recommendations and instructions for how to structure the monorepo (see #2) for advanced use cases:
Currently the v2 addon here in the blueprint, but also other v2 addons in the wild (e.g. ember-page-title), have an engines.node
declaration in their package.json
. While they have some dependencies (at least @embroider/addon-shim
) that run in node (which express their node dependency on their own), the addon itself is supposed to be static browser-based/idiomatic JavaScript.
So it seems to me we should remove the declaration?
When I try:
โฏ ember addon my-addon -b @embroider/addon-blueprint --yarn
I get:
Error creating new application. Removing generated directory `./my-addon`
Command failed with exit code 1: npm install --no-package-lock --save @embroider/addon-blueprint
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@embroider%2faddon-blueprint - Not found
npm ERR! 404
npm ERR! 404 '@embroider/addon-blueprint@*' is not in this registry.
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/michal/.npm/_logs/2022-06-25T18_12_15_560Z-debug-0.log
Stack Trace and Error Report: /var/folders/8q/yrjx_8s115q43r8w5qd90_m00000gn/T/error.dump.8997ea6d390387a3e22356075c7a9c29.log
To make sure addons don't accidentally depend on prototype extensions, as they could be disabled in the host app.
The easiest solution would probably be to add ember-disable-prototype-extensions
to the test app's package file?
Currently running:
ember addon ember-new-v2-addon-testr -b @embroider/addon-blueprint --pnpm --skip-npm --typescript --release-it
and getting:
Error creating new application. Removing generated directory `./ember-new-v2-addon-test`
Command failed with exit code 1: create-rwjblue-release-it-setup --no-install
[HttpError: Not Found] {
statusCode: 404,
headers: {
server: 'GitHub.com',
date: 'Wed, 22 Mar 2023 02:37:06 GMT',
'content-type': 'application/json; charset=utf-8',
'content-length': '106',
'x-github-media-type': 'github.v3; param=symmetra-preview; format=json',
'x-github-api-version-selected': '2022-11-28',
'x-ratelimit-limit': '60',
'x-ratelimit-remaining': '48',
'x-ratelimit-reset': '1679456172',
'x-ratelimit-used': '12',
'x-ratelimit-resource': 'core',
'access-control-expose-headers': 'ETag, Link, Location, Retry-After, X-GitHub-OTP, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Used, X-RateLimit-Resource, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval, X-GitHub-Media-Type, X-GitHub-SSO, X-GitHub-Request-Id, Deprecation, Sunset',
'access-control-allow-origin': '*',
'strict-transport-security': 'max-age=31536000; includeSubdomains; preload',
'x-frame-options': 'deny',
'x-content-type-options': 'nosniff',
'x-xss-protection': '0',
'referrer-policy': 'origin-when-cross-origin, strict-origin-when-cross-origin',
'content-security-policy': "default-src 'none'",
vary: 'Accept-Encoding, Accept, X-Requested-With',
'x-github-request-id': 'E2D8:2E7B:5B89B1:BC9C65:641A69D2',
connection: 'close'
},
body: {
message: 'Not Found',
documentation_url: 'https://docs.github.com/rest/reference/issues#create-a-label'
},
method: 'POST',
endpoint: '/repos/esbanarango/ember-new-v2-addon-test/labels'
}
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "Error: Not Found".] {
code: 'ERR_UNHANDLED_REJECTION'
}
Node.js v18.14.2
Stack Trace and Error Report: /var/folders/jq/k7tk0_dx5yvc0cxl4q3ll7680000gp/T/error.dump.581f5380f88e7166d5a81988b66fa7e3.log
The version of release-it-yarn-workspaces
that gets installed when passing the --release-it
flag does not support pnpm.
This should get fixed by
create-rwjblue-release-it-setup
hereThe current babel config doesn't allow gjs/gts.
We should add that babel plugin.
The babel plugin lives in the dist'd files from: https://github.com/ember-template-imports/ember-template-imports
To make things "easiest by default", while still also allowing for the correctness for power-users today, I'd like to propose we (eventually):
@embroider/addon-dev
ember-cli
support blueprints / ember g
today -- unless we somehow have a way to tell ember-cli about monorepo layouts -- e.g.: generate component in workspace A, and test in workspace B, etc.--monorepo
flag--addon-only
today, but we'd add some assertions so folks are not able to mix and match and potentially observe unexpected behavior (for example, --addon-only
with --test-app*
doesn't make sense).--monorepo
--addon-location
--test-app-location
--test-app-name
Obvious caveats:
When I try to run this blueprint directly from the git repo like this:
npx ember-cli new my-shiny-new-addon -b embroider-build/addon-blueprint
I see the following error:
Error creating new application. Removing generated directory `./my-shiny-new-addon`
Command failed with ENOENT: create-rwjblue-release-it-setup --no-install
spawn create-rwjblue-release-it-setup ENOENT
installing ember-v2-addon-blueprint
create .editorconfig
create .github/workflows/ci.yml
create .prettierignore
create .prettierrc.js
create CONTRIBUTING.md
create LICENSE.md
create README.md
create .gitignore
create package.json
create packages/my-shiny-new-addon/.eslintignore
create packages/my-shiny-new-addon/.eslintrc.js
create packages/my-shiny-new-addon/.template-lintrc.js
create packages/my-shiny-new-addon/addon-main.js
create packages/my-shiny-new-addon/babel.config.json
create packages/my-shiny-new-addon/package.json
create packages/my-shiny-new-addon/rollup.config.js
create packages/my-shiny-new-addon/src/index.js
create test-app-overrides/config/ember-try.js
create test-app-overrides/ember-cli-build.js
installing app
Ember CLI v4.3.0
โจ Creating a new Ember app in /Users/dfreeman/Desktop/Scratch/my-shiny-new-addon:
create .editorconfig
create .ember-cli
create .eslintignore
create .eslintrc.js
create .prettierignore
create .prettierrc.js
create .template-lintrc.js
create .travis.yml
create .watchmanconfig
create README.md
create app/app.js
create app/components/.gitkeep
create app/controllers/.gitkeep
create app/helpers/.gitkeep
create app/index.html
create app/models/.gitkeep
create app/router.js
create app/routes/.gitkeep
create app/styles/app.css
create app/templates/application.hbs
create config/ember-cli-update.json
create config/environment.js
create config/optional-features.json
create config/targets.js
create ember-cli-build.js
create .gitignore
create package.json
create public/robots.txt
create testem.js
create tests/helpers/index.js
create tests/index.html
create tests/integration/.gitkeep
create tests/test-helper.js
create tests/unit/.gitkeep
create vendor/.gitkeep
Error creating new application. Removing generated directory `./my-shiny-new-addon`
Command failed with ENOENT: create-rwjblue-release-it-setup --no-install
spawn create-rwjblue-release-it-setup ENOENT
Stack Trace and Error Report: /var/folders/6w/fd1g7pqj4vj0n3w28l2fql940000gn/T/error.dump.80a9ca3c7f0b2b198a802f12adbd91a2.log
(The log file doesn't contain any additional info, just a shallow processTicksAndRejections
backtrace)
Example: https://github.com/NullVoxPopuli/ember-resources/blob/main/.github/workflows/push-dist.yml
(and many other v2 addons are already doing this, too)
This tries to summarizes the pros & cons of the different possible directory layouts for organizing the different packages of a v2 addon in a monorepo:
/packages/* |
/packages/* + /test-apps/* + /docs |
/addon + /test-app + /docs |
/addon + /test-apps/* + /docs |
/<addon-name> + /test-app + /docs |
|
---|---|---|---|---|---|
Where to put addon | /packages/my-addon |
/packages/my-addon |
/addon |
/addon |
/<addon-name> |
Where to put test-app | /packages/test-app |
/test-apps/default ? |
/test-app |
/test-apps/default ? |
/test-app |
Where to put docs-app | /packages/docs |
/docs |
/docs |
/docs |
/docs |
Fosters monorepo discoverability 1 | โ | โ | โ | โญ๏ธ | โ |
Supports multiple addons | โ | โ | โ | โ | โ |
Supports multiple test-apps | โ | โ | โ | โ | โญ๏ธ |
Easy to understand | โญ๏ธ | โญ๏ธ | โ | โ | โ |
Good for few packages | โ | โญ๏ธ | โ | โ | โ |
Good for many packages | โญ๏ธ | โ | โ | โ | โญ๏ธ |
Used by | ember-stargate | similar to Embroider | ember-page-title | ember-resources |
โ
= well supported
โญ๏ธ = so-so
โ = not supported
1 - easy to grasp that existing packages are not static, but can be extended at any time
The current blueprint does not allow creating new v2 addon within an existing monorepo easily, unlike what the Readme says. Although we have customization options like --addon-location
, these only allow creating the addon structure in a temporary path and then copying things over to the actual monorepo. But ideally we would be able to do...
cd existing-repo
ember addon my-addon -b @embroider/addon-blueprint --addon-location=packages/my-addon/addon --test-app-location=packages/my-addon/test-app --test-app-name=my-addon-test-app --skip-git
This would:
package.json
README.md
et al directly into the adodn folder, and not copy-on-buildThis fails though:
ember addon
forcefully creates a new my-addon
directory here, so we would end up with the addon being in existing-repo/my-addon/packages/my-addon/addon
instead of existing-repo/packages/my-addon/addon
. EmberCLI does not seems to have a way to prevent that.generate
command, which does not have this behaviour, as e.g. ember g in-repo-addon my-addon -b @embroider/addon-blueprint ...
, but this also fails due to
generate
command expecting to be run inside an EmberCLI project, which existing-repo
is not-b
not being supported hereHow can we solve this?
existing-repo/my-addon/*
to ..
on afterInstall
? ๐คจember -v
ember-cli: 4.9.2
node: 18.12.1
os: darwin arm64
Executing ember addon demo -b @embroider/addon-blueprint --typescript
results in
create tests/integration/.gitkeep
create tests/test-helper.ts
create tests/unit/.gitkeep
install addon ember-cli-typescript
๐ง Installing packages... This might take a couple of minutes.
Error creating new application. Removing generated directory `./demo`
Command failed with exit code 1: yarn add --dev ember-cli-typescript --non-interactive
error Running this command will add the dependency to the workspace root rather than the workspace itself, which might not be what you want - if you really meant it, make it explicit by running this command again with the -W flag (or --ignore-workspace-root-check).
yarn add v1.22.19
Running ember addon demo -b @embroider/addon-blueprint --typescript -W
results in the same issue
Running ember addon v2-demo -b @embroider/addon-blueprint --typescript --ignore-workspace-root-check
also has the same error
Currently our boilerplate only supports npm and yarn here.
Library for testing types: expect-type
(what ember-source uses).
Example:
Will require that we update the eslint configs (I had to do that for my own stuff here)
Open questions:
ember.js has a separate tsconfig.json for the type tests -- do we need this? I did not find that I needed it for ember-resources
answer: we do need this -- ember-resources' types are generated through rollup, rather than tsc/glint
When trying to create a v2 addon, the script fails (regardless of any flags provided or omitted, including --typescript) with the following error:
Cannot read properties of undefined (reading 'typescript')
Full stacktrace and error report:
`=================================================================================
ENV Summary:
TIME: Thu Feb 09 2023 16:31:06 GMT-0600 (Central Standard Time)
TITLE: ember
ARGV:
ERROR Summary:
=================================================================================
`
This could be a more ergonomic alternative to our involved concurrently (sub)commands.
It could also be worse -- regardless, documented why, the tradeoffs, etc would be valuable
in an addon,
.
โโโฌ @glint/environment-ember-loose 0.9.7
โ โโโ โ missing peer @glimmer/component@^1.1.2
โ โโโ โ missing peer ember-cli-htmlbars@^6.0.1
โ โโโฌ @glint/template 0.9.7
โ โโโ โ missing peer @glimmer/component@^1.1.2
โโโฌ ember-template-lint 4.18.2
โ โโโฌ ember-template-imports 3.4.0
โ โโโ โ missing peer ember-cli-htmlbars@^6.0.0
โโโฌ @types/ember__test-helpers 2.9.1
โโโฌ @ember/test-helpers 2.9.3
โโโ โ missing peer ember-source@>=3.8.0
โโโฌ @embroider/util 1.9.0
โโโ โ missing peer ember-source@"*"
Peer dependencies that should be installed:
@glimmer/component@">=1.1.2 <2.0.0"
ember-cli-htmlbars@">=6.0.1 <7.0.0"
ember-source@>=3.8.0
So we need to add the 3 recommended dependencies to the peer list, because we ship glint by default"
ember-cli-htmlbars is a bit silly though, so I'm going to add a pnpm.ignore entry for that (idk how to do the equiv for npm)
For the blueprint itself, including eslint-prettier integration.
@embroider/addon-dev
3.0 is now released, we need to remember to update the blueprint to use it.
We have the other glint deps already, but this should probably be also added.
So, in my v2 addon projects, I have this for scripts:
"scripts": {
"dev": "concurrently 'npm:dev:*' --restart-after 5000 --prefix-colors cyan,white,yellow",
"dev:ember": "pnpm run --filter ember-app start",
"dev:addon": "pnpm run --filter ember-resources start --no-watch.clearScreen",
"dev:docs": "pnpm run --filter docs docs:watch --preserveWatchOutput",
"ci:update": "npx ember-ci-update",
"build": "pnpm run --filter ember-resources build",
"lint": "pnpm run --filter '*' lint:js --fix"
},
Some notes aand key differences between this and what is currently in the blueprints
--restart-after 5000
is because ember-cli constantly crashes when addons' dist files are changed and you have a browser trying to load the app. See: ember-cli/ember-cli#9584 (and all related links / refs -- big problem, and it's kind of embarassing no one has fixed it ๐
(and I'm also to blame for why it hasn't been fixed))Questions:
--package-manager
-- ember-cli/ember-cli#9879 -- maybe we use this instead of --pnpm
--filter "*"
this greatly reduces boilerplate, as we can have "test": "pnpm run --filter '*' test"
as well.Not to say we shouldn't keep the files in the root directory, we just need to change what's in them.
This includes (some of these are already in the addon directory, but are missing info)
every other blueprint in the ember ecosystem has atomic workspaces
The top-level ignore files are still helpful, because editors are what run prettier / etc outside of workspaces.
Additionally, our blueprint doesn't even run prettier from the root directory.
This would also allow the --addon-only
flag to "just work" without having additional logic (like we have now (? (need to check)) for moving files that would be in the root to the addon workspace (because it's the only workspace with --addon-only
)
when using default options with this blueprint in particular, the package manager is switched to yarn.
when using --addon-only
it's npm
.
Let's remove the logic for setting up yarn by default to align with everything else and npm is default anyway
Got this error on 1.5
โฏ npx ember-cli addon ember-qunit -b @embroider/addon-blueprint
Command failed with exit code 1: yarn install
Internal Error: Duplicate workspace name ember-qunit: Development/tmp/ember-qunit/ember-qunit conflicts with Development/tmp/ember-qunit
Tried to update a v2 adodn created with the 1.3 version of this blueprint to the latest 1.4, using npx ember-cli-update
. Which gave this error output:
Error creating new application. Removing generated directory `./ember-headless-form`
Cannot read properties of undefined (reading 'typescript')
Stack Trace and Error Report: /var/folders/w9/2p5cmdpn6sd1sbql4ynytzyr0000gn/T/error.dump.71fc2fa1a0a0e9ff14d25a835ccb7ce5.log
Error creating new application. Removing generated directory `./ember-headless-form`
Cannot read properties of undefined (reading 'typescript')
Stack Trace and Error Report: /var/folders/w9/2p5cmdpn6sd1sbql4ynytzyr0000gn/T/error.dump.f6618369a5f40caed8117658e0580f52.log
WARNING: Node v18.12.1 is not tested against Ember CLI on your platform. We recommend that you use the most-recent "Active LTS" version of Node.js. See https://git.io/v7S5n for details.
The option '--pnpm' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.
The option '--ci-provider' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.
The option '--typescript' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.
WARNING: Node v18.12.1 is not tested against Ember CLI on your platform. We recommend that you use the most-recent "Active LTS" version of Node.js. See https://git.io/v7S5n for details.
The option '--pnpm' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.
The option '--ci-provider' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.
The option '--typescript' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.
Error creating new application. Removing generated directory `./my-project`
Cannot read properties of undefined (reading 'typescript')
Stack Trace and Error Report: /var/folders/w9/2p5cmdpn6sd1sbql4ynytzyr0000gn/T/error.dump.4e3a1124bcb28256909920b53823657d.log
Error creating new application. Removing generated directory `./my-project`
Cannot read properties of undefined (reading 'typescript')
Stack Trace and Error Report: /var/folders/w9/2p5cmdpn6sd1sbql4ynytzyr0000gn/T/error.dump.a162f6e1bfdf06487bd6d1507d2c0912.log
Error: Command failed with exit code 1: npx [email protected] new my-project -sg -sn -sb -b @embroider/[email protected] --pnpm --ci-provider=github --typescript
WARNING: Node v18.12.1 is not tested against Ember CLI on your platform. We recommend that you use the most-recent "Active LTS" version of Node.js. See https://git.io/v7S5n for details.
The option '--pnpm' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.
The option '--ci-provider' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.
The option '--typescript' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.
Error creating new application. Removing generated directory `./my-project`
at makeError (/Users/sihmig/.npm/_npx/f4f35b2eda398bf9/node_modules/execa/lib/error.js:60:11)
at handlePromise (/Users/sihmig/.npm/_npx/f4f35b2eda398bf9/node_modules/execa/index.js:118:26)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async __runEmber (/Users/sihmig/.npm/_npx/f4f35b2eda398bf9/node_modules/ember-cli-update/src/get-start-and-end-commands.js:214:11)
at async _runEmber (/Users/sihmig/.npm/_npx/f4f35b2eda398bf9/node_modules/ember-cli-update/src/get-start-and-end-commands.js:230:11)
at async createProject (/Users/sihmig/.npm/_npx/f4f35b2eda398bf9/node_modules/ember-cli-update/src/get-start-and-end-commands.js:245:9)
at async _prepareCommand (/Users/sihmig/.npm/_npx/f4f35b2eda398bf9/node_modules/boilerplate-update/src/get-start-and-end-commands.js:54:17)
at async AsyncFunction.prepareCommandUsingRemote (/Users/sihmig/.npm/_npx/f4f35b2eda398bf9/node_modules/boilerplate-update/src/get-start-and-end-commands.js:110:10)
at async AsyncFunction.prepareCommand (/Users/sihmig/.npm/_npx/f4f35b2eda398bf9/node_modules/boilerplate-update/src/get-start-and-end-commands.js:193:10)
at async Promise.all (index 0) {
shortMessage: 'Command failed with exit code 1: npx [email protected] new my-project -sg -sn -sb -b @embroider/[email protected] --pnpm --ci-provider=github --typescript',
command: 'npx [email protected] new my-project -sg -sn -sb -b @embroider/[email protected] --pnpm --ci-provider=github --typescript',
escapedCommand: 'npx "[email protected]" new my-project -sg -sn -sb -b "@embroider/[email protected]" --pnpm "--ci-provider=github" --typescript',
exitCode: 1,
signal: undefined,
signalDescription: undefined,
stdout: 'WARNING: Node v18.12.1 is not tested against Ember CLI on your platform. We recommend that you use the most-recent "Active LTS" version of Node.js. See https://git.io/v7S5n for details.\n' +
"The option '--pnpm' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.\n" +
"The option '--ci-provider' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.\n" +
"The option '--typescript' is not registered with the 'new' command. Run `ember new --help` for a list of supported options.\n" +
'Error creating new application. Removing generated directory `./my-project`',
stderr: undefined,
failed: true,
timedOut: false,
isCanceled: false,
killed: false
}
The exact reason why this blueprint fails is not as interesting as the fact that ecu runs it with an old version of EmberCLI 3.16! ๐ค One that apparently the blueprint does not work with, but that's ok IMHO, we can require to run it only with recent versions, not? (e.g. the --typescript
flag in EmberCLI is only properly supported (for our use case) with 4.10.0 (currently beta)...
According to the RFC, it should be 2019. See #1 (comment)
So should we
It seems rollup-plugin-ts
dropped node 14 support without a new major.
The blueprint emits a Github workflow using node 14, which will make a TS addon fail with the new version, and when running with our ootb floating dependencies scenario. But given that v2 addons actually don't have a dependency on node, it's just used for our prepublish rollup build, should we then switch to running the latest node in CI instead?
A proposal in brief:
Covers:
typsecript
as a resolveable module -- cc @chriskrychoThoughts?:
sample repo if cloning is easier: https://github.com/NullVoxPopuli/ember-lint-demonstrate-overrides-based-config
But also trying this out on a real project: NullVoxPopuli/limber#545
'use strict';
function hasDep(depName) {
try {
return Boolean(require.resolve(depName));
} catch (e) {
if (e.message.startsWith(`Cannot find module '${depName}'`)) return false;
throw e;
}
}
function proposedEmberDefault(personalPreferences) {
let hasTypeScript = hasDep('typescript');
const configBuilder = {
modules: {
browser: {
get js() {
return {
files: [
'{src,app,addon,addon-test-support,tests}/**/*.{gjs,js}',
'tests/dummy/config/deprecation-workflow.js',
'config/deprecation-workflow.js',
],
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 2022,
sourceType: 'module',
ecmaFeatures: {
legacyDecorators: true,
},
},
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:ember/recommended',
'plugin:prettier/recommended',
],
env: {
browser: true,
},
rules: {
...personalPreferences.rules,
},
}
},
get ts() {
if (!hasTypeScript) return;
return {
files: ['{src,app,addon,addon-test-support,tests,types}/**/*.{gts,ts}'],
parser: '@typescript-eslint/parser',
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:ember/recommended',
'plugin:prettier/recommended',
'plugin:@typescript-eslint/recommended',
],
env: {
browser: true,
},
rules: {
// type imports are removed in builds
'@typescript-eslint/consistent-type-imports': 'error',
// prefer inference, but it is recommended to declare
// return types around public API
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
// Allows placeholder args to still be defined for
// documentation or "for later" purposes
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
...personalPreferences.rules,
},
}
},
get declarations() {
if (!hasTypeScript) return;
return {
files: ['**/*.d.ts'],
extends: [
'eslint:recommended',
'plugin:prettier/recommended',
'plugin:@typescript-eslint/recommended',
],
env: {
browser: true,
},
rules: {
'@typescript-eslint/no-empty-interface': 'off'
}
}
}
},
tests: {
get js() {
let browserJS = configBuilder.modules.browser.js;
return {
...browserJS,
files: ['tests/**/*-test.{gjs,js}'],
extends: [...browserJS.extends, 'plugin:qunit/recommended'],
}
},
get ts() {
if (!hasTypeScript) return;
let browserTS = configBuilder.modules.browser.ts;
return {
...browserTS,
files: ['tests/**/*-test.{gts,ts}'],
extends: [...browserTS.extends, 'plugin:qunit/recommended'],
}
},
}
},
commonjs: {
node: {
get js() {
return {
files: [
'./*.{cjs,js}',
'./config/**/*.js',
'./lib/*/index.js',
'./server/**/*.js',
'./blueprints/*/index.js',
],
parserOptions: {
sourceType: 'script',
},
env: {
browser: false,
node: true,
},
plugins: ['node'],
extends: ['plugin:node/recommended'],
rules: {
...personalPreferences.rules,
// this can be removed once the following is fixed
// https://github.com/mysticatea/eslint-plugin-node/issues/77
'node/no-unpublished-require': 'off',
},
}
}
}
}
}
return configBuilder;
}
const personalPreferences = {
rules: {
// const has misleading safety implications
// look in to "liberal let"
'prefer-const': 'off',
// people should know that no return is undefined in JS
'getter-return': ['error', { allowImplicit: true }],
'padding-line-between-statements': [
'error',
{ blankLine: 'always', prev: '*', next: 'return' },
{ blankLine: 'always', prev: '*', next: 'break' },
{ blankLine: 'always', prev: '*', next: 'block-like' },
{ blankLine: 'always', prev: 'block-like', next: '*' },
{ blankLine: 'always', prev: ['const', 'let'], next: '*' },
{ blankLine: 'always', prev: '*', next: ['const', 'let'] },
{ blankLine: 'any', prev: ['const', 'let'], next: ['const', 'let'] },
{ blankLine: 'any', prev: ['*'], next: ['case'] },
],
},
}
const config = proposedEmberDefault(personalPreferences);
module.exports = {
root: true,
/**
* No root rules needed, because we define everything with overrides
* so that understanding what set of rules is applied to what files
* is easier to understand.
*
* This can be debugged with
*
* eslint --print-config ./path/to/file
*/
rules: {},
overrides: [
config.commonjs.node.js,
config.modules.browser.js,
config.modules.browser.ts,
config.modules.browser.declarations,
config.modules.tests.js,
config.modules.tests.ts,
].filter(Boolean),
};
I just noticed that we're using rollup-plugin-ts in the blueprint but that's not a very popular rollup plugin. Is there a particular reason we're not using the more popular one?
https://npmtrends.com/@rollup/plugin-typescript-vs-rollup-plugin-ts-vs-rollup-plugin-typescript2
Volta is a common tool used amongst addon authors -- would it make sense to have a --volta
flag to pre-configure the volta entries?
root package.json
volta: {
node: "{whatever current is}",
}
and for each generated workspace:
volta: {
extends: path.relative(here, wherever the root is)
}
.md
, ci.yml
etc.). Related:
When RFC800 has landed, especially the --typescript
flag for ember addon
(see https://emberjs.github.io/rfcs/0800-ts-adoption-plan.html#cli-integration), we should support that here as well. Especially as we need to compile TypeScript in rollup, so support in addons is not as trivial as for v1 addons (ember install ember-cli-typescript
).
Some prior art:
I've been using publint
and@arethetypeswrong/cli
on a couple repos, and it's helpful for catching common footguns
these can be added to the concurrently` lint command in the addon package to help people double check that their package.json is configured correctly
publint works perfectly in my packages as is
arethetypeswrong, however, has some open issues:
Should we run or add the output of yarn create rwjblue-release-it-setup
to the blueprint?
I found this to be super useful. However the v1 blueprint does not have this, so maybe adding this becomes controversial when backporting this to the main ember-cli
repo?
On the other hand, it makes publishing so much easier, especially in a monorepo with potentially multiple public packages, or just that it automates the internal cross-references (addon being a dependency of test-app).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.