Client side Javascript broken (or works differently) in lume 2.0.x

lumeland / lume

🔥 Static site generator for Deno 🦕

https://lume.land

MIT License

1.88k stars 86 forks source link

Client side Javascript broken (or works differently) in lume 2.0.x #547

Closed max-l closed 9 months ago

max-l commented 9 months ago

Version

2.0.2

Platform

ubuntu

What steps will reproduce the bug?

Port a 1.x site that has client side javascript

How often does it reproduce? Is there a required condition?

always

What is the expected behavior?

I would expect a compiled javascript bundle to be created (ex main.js), in _site/

What do you see instead?

no bundle gets created

Additional information

No response

max-l commented 9 months ago

In a Lume 1.x site I have :

export default function (_data: unknown, { url }: Helpers) {
  return `<!doctype html>
    <html>
        <head>
            <meta charset="utf-8">                  
        </head>
        <body>
            <div id="app"/>
            <script type="module" src="${url("/main.js")}" bundle></script>
        </body>     
    </html>
    `
}

A bundle gets created and deposited in _/site.

In lume 2.0.x, I can't get it to work.

oscarotero commented 9 months ago

Hmm, this bundle attribute is something new. Are you using a plugin for that? The only "official" way in Lume 1 and 2 to bundle javascript files is by using the esbuild plugin.

max-l commented 9 months ago

@oscarotero I created this repo: https://github.com/max-l/lume_2_with_client_js

I managed to get the bundle to build, but then it seems that the esbuild takes over everything, including the static pre generation.

oscarotero commented 9 months ago

Okay, looks like you're trying to do two different things with the same extension jsx.

The option entryPoints doesn't exist in the Lume plugin. Lume uses extensions to identificate the purpose of the files. esbuild is configured with the extension .jsx so all files with this extension will be processed in the same way (both index.jsx and main.jsx).
If you want to create static pages from jsx, and client side code from jsx, you have to define two different extensions or use subextensions. For example, the jsx for HTML pages could be .page.jsx and the rest of .jsx files are for client side code. In Lume 2 you have the pageSubExtension option for that. For example:

site.use(jsx({
  pageSubExtension: ".page",
}))

site.use(esbuild({
    extensions: [".jsx"],
    options: {
        jsxDev: ! isProduction,
        minify: isProduction
    }
  }))

Now you can rename your index.jsx to index.page.jsx and it will work fine.

max-l commented 9 months ago

Ok, that works, thanks !

I pushed your suggested fixes to the repo : https://github.com/max-l/lume_2_with_client_js

I'm now getting a problem with imports on the client side:

main.jsx:1 Uncaught ReferenceError: useState is not defined
    at main.jsx:1:21

https://github.com/max-l/lume_2_with_client_js/blob/main/main.jsx#L1

I tried importing with :

import React, {useState} from "react"

import React, {useState} from "npm:react"

without success

oscarotero commented 9 months ago

I've disabled the jsx plugin and created the index page with index.vto and it works fine:

import lume from "lume/mod.ts";
import jsx from "lume/plugins/jsx.ts";
import esbuild from "lume/plugins/esbuild.ts";
import sourceMaps from "lume/plugins/source_maps.ts";

const site = lume()

const isProduction = false

// site.use(jsx({
//     pageSubExtension: ".page",
//   }))

site.use(esbuild({
    extensions: [".jsx"],
    options: {
        jsxDev: ! isProduction,
        minify: isProduction
    }
  }))
  .use(sourceMaps({}))

export default site;

Looks like there is some kind of conflict between jsx plugin and esbuild with jsx. I'll dig into it.

oscarotero commented 9 months ago

Okay, I found the bug and it's fixed now. Before releasing a new version, can you test it? You can upgrade to the latest development version of lume with deno task lume upgrade --dev.

max-l commented 9 months ago

It works, I've uploaded the changes here: https://github.com/max-l/lume_2_with_client_js

Thanks

oscarotero commented 9 months ago

Fix released in Lume 2.0.3.