-
Notifications
You must be signed in to change notification settings - Fork 142
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
vite dev/test/build from app #1695
Conversation
f386052
to
6567d93
Compare
some tests are failing for unknown reason. |
Should i add a Test for vite app? |
@ef4 this is ready for review |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for giving this a go. Your spike showing this working is a helpful guide for several things, especially the middleware setup.
But this is not mergeable as is. A lot of stuff here is hard-coded in ways that might work in your app but definitely break in others. And @embroider/vite
should only need to do vite-specific things.
Can we find time for you to pair with either me or @mansona? Because your help on this would be great, but it's so far not aligned with what we're trying to do. The effort that went into this PR could go directly into fixing these things in @embroider/core
instead of hacking around them.
packages/util/package.json
Outdated
@@ -52,6 +52,7 @@ | |||
"@ember/test-helpers": "^2.9.1", | |||
"@embroider/compat": "workspace:*", | |||
"@embroider/core": "workspace:*", | |||
"@embroider/shared-internals": "workspace:*", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you have some unrelated changes in here. I don't see anything in this PR that would need this change.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, not sure why tests where suddenly failing. It was failing we this missing dependency...
packages/util/package.json
Outdated
@@ -91,7 +92,8 @@ | |||
"qunit": "^2.19.1", | |||
"qunit-dom": "^2.0.0", | |||
"typescript": "^5.1.6", | |||
"webpack": "^5.74.0" | |||
"webpack": "^5.74.0", | |||
"semver": "^7.5.4" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unrelated?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, failing tests because of this missing dependency... Not sure why.
return new Promise((resolve, reject) => { | ||
const child = fork('./node_modules/ember-cli/bin/ember', ['build']); | ||
child.on('exit', code => (code === 0 ? resolve() : reject())); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think this is the best place to manage rebuilds of the addons. This kind of rebuild is extremely expensive compared with ember s
.
We could still do the persistent caching you have here in order to avoid even a first-time build of the addons if none have changed since your last build. But that logic would go some place more like
export function convertLegacyAddons(compatApp: CompatApp) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, well it would also be quite rare to do build. Only if .embroider folder does not exist and if package-lock changed and index.html change.
Though i would like to rebuild the index.html only instead of full build.
packages/vite/src/build.ts
Outdated
|
||
export function build(): Plugin { | ||
let resolverLoader = new ResolverLoader(process.cwd()); | ||
const engine = resolverLoader.resolver.options.engines[0]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
engines other than the first need this feature too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
okay
packages/vite/src/resolver.ts
Outdated
server.watcher.add('./' + f); | ||
} | ||
}); | ||
server.watcher.add('./app/index.html'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't actually think we should bother supporting app/index.html. It's unnecessarily weird when we could just follow the normal vite convention and put index.html at the root.
It's not like people can use their original app/index.html anyway. Its format must change to work with this, if I'm reading correctly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good. Currently I'm rewrite it in rewriteHtml and just load the one kn rewritten-app.
I move tge index.html to the root then
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
moving to root will not work, because the ember build will not work... unless we just put an empty index.html there... but then we will have 2 index.html files
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think i found an option to ember-cli to set index.html path. Will try that
packages/vite/src/virtual-files.ts
Outdated
@@ -0,0 +1,125 @@ | |||
import { relative } from 'path'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All of this entry generation is adding a second implementation for us to maintain instead of fixing the implementation we have. It doesn't belong in packages/vite
because it's not vite-specific.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good. I can look to replace the code.
webpack should support the same glob pattern
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The glob pattern is only supported by vite...
Although there us a custom loader for webpack, it has a different syntax.
I think we should keep this for the app entries.
The addon entry file can be reverted to use the generated one by ember build
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
replacing this with compat app builder
I'm working now on using compat app builder to rebuild html and app assets when relevant files are added/removed. Looks working fine. |
ee7f862
to
74a4290
Compare
@ef4 I made some changes
|
@@ -57,6 +57,7 @@ import type { TransformOptions } from '@babel/core'; | |||
import { MacrosConfig } from '@embroider/macros/src/node'; | |||
import SourceMapConcat from 'fast-sourcemap-concat'; | |||
import escapeRegExp from 'escape-string-regexp'; | |||
import { configReplacePatterns } from 'ember-cli/lib/utilities/ember-app-utils'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Im not sure if there is another place where embroider does the replacements
* load env from root
looks like the pr #1686 broke this... |
e30d1b9
to
a12e437
Compare
Perhaps it was relying on the resolvableExtensions in the node resolver, which is not there anymore after #1686. For normal module imports that would not be an issue, since we can just configure vite to resolve .ts. But it is potentially an issue for discovering components in non-strict templates, since we're using nodeResolve there. That gives me an idea: we could probably use |
Also, I needed to add back the addons.ts for the depOptimizer as otherwise i was getting duplicates for glimmer-vm which does allow it. |
@mansona maybe you can already have a look at this now. |
@@ -200,7 +209,7 @@ export default class CompatApp { | |||
|
|||
private get indexTree() { | |||
let indexFilePath = this.legacyEmberAppInstance.options.outputPaths.app.html; | |||
let index = buildFunnel(this.legacyEmberAppInstance.trees.app, { | |||
let index = buildFunnel(this.legacyEmberAppInstance.trees.indexHtml || this.legacyEmberAppInstance.trees.app, { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
required to have index.html at root for vite
@@ -83,7 +83,7 @@ export class PreparedEmberHTML { | |||
implicitTestStyles: Placeholder; | |||
|
|||
constructor(private asset: EmberAsset) { | |||
this.dom = new JSDOM(readFileSync(asset.sourcePath, 'utf8')); | |||
this.dom = new JSDOM(asset.source || readFileSync(asset.sourcePath, 'utf8')); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
used to load in-memory html content
@@ -532,22 +532,41 @@ export class Resolver { | |||
} | |||
|
|||
private *componentTemplateCandidates(inPackageName: string) { | |||
yield { prefix: '/templates/components/', suffix: '' }; | |||
yield { prefix: '/components/', suffix: '/template' }; | |||
yield { prefix: '/templates/components/', suffix: '.hbs' }; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
needed to add extension and /app prefix since component resolution is only done with nodeResolver, can revert when it uses defaultResolve
@@ -1041,10 +1060,10 @@ export class Resolver { | |||
// but then come back to the original location here in the fallback when the | |||
// rehomed request fails | |||
let movedPkg = this.packageCache.maybeMoved(pkg); | |||
if (movedPkg !== pkg) { | |||
if (movedPkg !== pkg && !pkg.isV2App()) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if its a app then no need to error here. (in vite, app is at root, and everything is loaded from root)
@@ -0,0 +1,23 @@ | |||
import { ResolverLoader, packageName } from '@embroider/core'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
added this back because i was getting duplicate packages, like glimmer-vm which does not like it
@@ -0,0 +1,59 @@ | |||
/* eslint-disable no-console */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this is to support ci tests with vite
if (!result) { | ||
result = await context.resolve( | ||
request.specifier, | ||
request.fromFile.replace('/package.json', '/app/package.json'), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
need to look into /app folder
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this can now already load most from root folder ./app and tests folder instead of rewritten_app folder. a few hacks where required.
the only files read from rewritten_app are :
most problematic where asset loading.
vite does not allow loading static files from outside of root dir, so setting root to /app will not work.
using the CWD as root, will not load the index.html file.
this is where the custom middleware comes in to handle this parts.
missing parts to allow editing live reload:
vite-app/config/environment.js
again at runtime (browser) and merge it again , like this, developers can edit the env and have it load by vite.content-for
in a separate file so we can do it our selfs and expose api to build index.html