Webpack 5 support

[mhauens]

As preact-cli is still using [email protected], ist there a plan to upgrade to latest webpack 5 version?

[rschristian]

As far as I know there is no current plan in motion for doing so, no. It'd certainly be a nice-to-have, but there's at least a few dependencies that need some work / reevaluation and are holding us back from updating as they're not compatible. And that's not taking into account the work needed to make that upgrade happen, or if anyone is willing to do it.

Most active development is over on WMR at the moment.

[adroitwhiz]

Webpack v4 is broken on Node 17 and up with no plans to fix it (https://github.com/webpack/webpack/issues/14532), so if preact-cli is in fact unmaintained and there's no work being put into upgrading to Webpack 5, an official deprecation notice would be nice.

[rschristian]

Preact-CLI isn't necessarily unmaintained, as you can see via the commit history, work has been done recently. But keeping up with the rapidly changing Webpack ecosystem is extremely time consuming on the small group of volunteer maintainers (see https://github.com/preactjs/wmr/issues/867#issuecomment-916956523 for some great context)

I don't think anyone is ready to deprecate yet (or I haven't heard anything at least) but community contributions are certainly always welcome. If anyone has some experience or wants to put together a PR, I'm sure people would be happy to review.

I believe I had a WIP sitting around, so I might be able to take a look at it over the coming week.

Appreciate the heads-up on that Webpack issue! Good to know that might be a problem.

[ForsakenHarmony]

Webpack v4 is broken on Node 17 and up with no plans to fix it (webpack/webpack#14532), so if preact-cli is in fact unmaintained and there's no work being put into upgrading to Webpack 5, an official deprecation notice would be nice.

As long as it works with Node 16 I don't see any reason to do so right now, Node 17 is "Current" and will never be LTS. ("Production applications should only use Active LTS or Maintenance LTS releases.").

With Node 18 however, things might change, and it would suck if we can't support it.

[FrantzUml]

Sure preact-cli is obsolete with many dependencies package deprecated (webpack, jest, html-webpack-plugin, chokidar, even preact itself, and so on). For example, using [email protected] instead of @4.1.0 makes error as vnode.attributes is replaced by vnode.props, and so on.

[rschristian]

@FrantzUml You're confusing "deprecated" with "older versions". Few packages actually are deprecated, none with actual issues from that deprecation. Usually just maintainers giving a nudge to upgrade, which is totally fair (but not viable at this time for us).

For example, using [email protected] instead of @4.1.0

preact-cli doesn't rely on preact-router at all. That's something entirely in users' own applications (which you can replace with any router, I might add). That's your dependency, you're free to upgrade it if you want.

[FrantzUml]

Sorry but not confusing at all : make an npm audit once installed and you'll see 68 packages with high level security. Concerning preact-router, the package.json for preact-cli indicates "preact-router": "^3.0.1" : no updates for package.json means obsolete for me.

[rschristian]

make an npm audit once installed and you'll see 68 packages with high level security.

npm audit is one of the most horribly flawed pieces of software out there. You can't rely on it, as it has no concept of dev vs prod dependencies. None of those "vulnerabilities" are actual problems.

Here's some great reading on why npm audit is totally junk, if you want to learn more: https://overreacted.io/npm-audit-broken-by-design/

Concerning preact-router, the package.json for preact-cli

Again, preact-cli doesn't have a dependency on preact-router. It's your package.json. You can do with it as you please.

Upgrade the version, swap it out for something else, remove client-side routing altogether; it's your prerogative. CLI is not opinionated when it comes to routing.

no updates for package.json means obsolete for me.

Refusal to update your own package file if you want something different (like a newer version of preact-router) doesn't make the package obsolete.

Please try to be constructive in the future. You're not adding value here.

[rschristian]

Bit of a status update for any who are curious: v4 is coming along, hopefully to be published in the next couple of months.

If anyone is interested in trying out a prerelease version and providing feedback, it can be installed by executing the following:

$ [npm install / yarn add] https://gitpkg.now.sh/preactjs/preact-cli/packages/cli\?next

An unrefined set of changelogs can be found here: https://github.com/preactjs/preact-cli/tree/next/.changeset

Let me know if there's any comments, concerns, issues, etc.

Thanks!

[niknah]

https://gitpkg.now.sh/preactjs/preact-cli/packages/cli?next` is serving blank pages for me.

I'm using the default project created from... npx preact-cli create default my-project

[rschristian]

https://gitpkg.now.sh/preactjs/preact-cli/packages/cli?next` is serving blank pages for me.

I'm using the default project created from...

npx preact-cli create default my-project

Did you read through the change logs and make the necessary adjustments? That project creation command is for v3 as are the templates.

This is not even a prerelease of v4, hence the installation straight from GitHub (or rather, from a site that supports installing from a GitHub monorepo). The templates therefore might not match up, you'll need to go by the change log or provide some more info. It could be a bug.

Edit: You might be able to use the next branch for the default template, not sure: npx preact-cli create preactjs-templates/default#next my-project

[niknah]

Yes, preactjs-tempates/defaultnext works.

[oteoe]

https://gitpkg.now.sh/preactjs/preact-cli/packages/cli?next` is serving blank pages for me. I'm using the default project created from... npx preact-cli create default my-project

Did you read through the change logs and make the necessary adjustments? That project creation command is for v3 as are the templates.

This is not even a prerelease of v4, hence the installation straight from GitHub (or rather, from a site that supports installing from a GitHub monorepo). The templates therefore might not match up, you'll need to go by the change log or provide some more info. It could be a bug.

Edit: You might be able to use the next branch for the default template, not sure: npx preact-cli create preactjs-templates/default#next my-project

any hints on when can we expect a prerelease of v4?

[rschristian]

I could maybe try to get one out today.

[oteoe]

I could maybe try to get one out today.

That would be great, would be happy to test

[rschristian]

Well alright, 4.0.0-next.1 has been published on NPM!

Some getting started notes:

• We have a brand-new project initializer that is much faster than the old and will automatically consume the correct (next) branches for the templates. You can run $ [npm init / yarn create] preact-cli <template> <project-name> to use it.
• Some of the flags have changed, make sure to review the README.md
• The underlying Webpack config obviously has changed a fair bit. If you're making use of a preact.config.js, please do comment it all out and figure out the adjustments you need to make after you have a working project.
• <% preact.headEnd %> and <% preact.bodyEnd %> are no longer supported in your template.html! There is an error message with instructions if you've kept it around, but please do be aware that you'll need to swap it out with the new template. You can find it here and new projects will copy it automatically. As with v3, if you don't have a copy in your project, no worries. CLI brings its own and will use that instead. So if you don't need or want to make alterations it's not an issue.

Again, an unrefined set of changelogs if you want to read through the precise changes and justification behind them: https://github.com/preactjs/preact-cli/tree/next/.changeset

Of course, this is prerelease software so there might be issues here and there. If you encounter them, please let me know! I'd love to fix them.

Thanks everyone!

Edit: And do be aware, this does not mean the API is finalized! There may (and likely will) be breaking changes between these next versions.

[oteoe]

41 verbose Darwin 22.2.0 42 verbose node v16.18.0 43 verbose npm v8.19.2 44 error code 1 45 error path /Users/teo/Documents/preact-cli 46 error command failed 47 error command sh -c -- create-preact-cli templates/default demo12

so I did npm i create-preact-cli -g create-preact-cli create default my-project

[rschristian]

@oteoe I'm gonna need a bit more than the last few lines of an error message. Standard issue procedure here:

1. What happened?
2. What did you expect to happen?
3. How can I reproduce this?

[giulianopiovezan]

Hi @rschristian, any updates about v4 to be stable and realeased?

[rschristian]

Hi @rschristian, any updates about v4 to be stable and realeased?

Well, so far I've only gotten feedback from a single individual -- without people testing, I'm not super thrilled about pushing out as stable. Have you been using the prerelease? Any issues, comments, concerns?

There are some things I'd like to change yet, but that depends on finding large blocks of free time.

I'm not planning on causing too much in the way of breakage between the prerelease and stable, so certainly use it now if you aren't already.

[maitrungduc1410]

hope to see this available soon, our team is building a microfrontend framework that supports multiple UI lib/framework and Preact is our next target.

Module Federation's only available from Webpack 5

[rschristian]

hope to see this available soon, our team is building a microfrontend framework that supports multiple UI lib/framework and Preact is our next target.

Module Federation's only available from Webpack 5

Not that this should inhibit you anyways, but microfrontends are quite near to being the opposite of Preact-CLI's target... I think it's quite unlikely whatever you're building a) makes sense to use with Preact-CLI and b) is implementable without extensive hacking of the config.

I'm not entirely sure how a frontend framework would be integrated in without other frameworks in the very same space, but sounds neat though!

[kentr]

On basic install, I get this test error

 FAIL  tests/header.test.js
  Initial Test of the Header
    ✕ Header renders 3 nav items (2 ms)

  ● Initial Test of the Header › Header renders 3 nav items

    TypeError: ShallowWrapper can only wrap valid elements

       6 | describe('Initial Test of the Header', () => {
       7 | 	test('Header renders 3 nav items', () => {
    >  8 | 		const context = shallow(<Header />);
         | 		                       ^
       9 | 		expect(context.find('h1').text()).toBe('Preact App');
      10 | 		expect(context.find('Link').length).toBe(3);
      11 | 	});

preact info

Environment Info:
  System:
    OS: macOS 12.7.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.3.0 - ~/.nvm/versions/node/v20.11.0/bin/npm
  npmPackages:
    preact: ^10.11.3 => 10.19.3 
    preact-cli: ^4.0.0-next.1 => 4.0.0-next.6 
    preact-render-to-string: ^5.2.6 => 5.2.6 
    preact-router: ^3.2.1 => 3.2.1 

[rschristian]

@kentr This is not the place for comments about testing. Would be better placed in the enzyme-adapter, jest-preset, or even the template repos.

[kentr]

It was intended as feedback on the webpack 5 version.

On Feb 2, 2024, at 1:37 PM, Ryan Christian @.***> wrote:

@kentr https://github.com/kentr This is not the place for comments about testing. Would be better placed in the enzyme-adapter https://github.com/preactjs/enzyme-adapter-preact-pure, jest-preset https://github.com/preactjs/jest-preset-preact, or even the template https://github.com/preactjs-templates/defaulgt repos.

— Reply to this email directly, view it on GitHub https://github.com/preactjs/preact-cli/issues/1579#issuecomment-1924662535, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABE4DGGYNBK6YPGAMIZDYLYRVFA7AVCNFSM46JSBYVKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOJSGQ3DMMRVGM2Q. You are receiving this because you were mentioned.

[rschristian]

Preact-CLI and, by extension, Webpack have no impact or relation on testing.