Using imports in page file

Question

Using imports in page file

Closed this issue a year ago · 14 comments

Can I use imports in -page.jsx file for JS code? Looks like all imports are thrown out and are not bundled.

Input:
index-page.jsx

import { Page } from '@nakedjsx/core/page';
import { helper } from './helpers.js';

Page.Create('en');
Page.AppendBody(<div />);
Page.AppendJs(() => {
  console.log(helper);
});
Page.Render();

Output:
index.html

<!DOCTYPE html>
<html lang="en">

<head></head>

<body>
    <div></div>
    <script>
        "use strict";
        console.log(helper);
    </script>
</body>

</html>

Answer 1 · 2023-06-20T07:36:29.000Z

~~Weird, looks like it's being tree shaken away incorrectly. I would have thought that would work~~, I'll take a look.

What is the value of the 'helper' named export in this case?

Answer 2 · 2023-06-20T07:41:19.000Z

I've test it with function and string (empty or not), and with build time value.

Answer 3 · 2023-06-20T08:13:31.000Z

Ok, so I realised that you're trying to pass a build-time object to the client JavaScript.

There are a few options for doing this, I'm having a play with it now. The simplest way is to move the the import to a -client.js file.

But I've found a couple things in this space that aren't working as I'd like them to. Although this magic construct allows you to pass a JS function from build-time:

import { Page } from '@nakedjsx/core/page';

const helper = () => "helper0"

Page.Create('en');
Page.AppendBody(<div />);
Page.AppendJs(helper); // works because helper is a constant function at build-time
Page.AppendJs(() => {
  console.log(helper());
});
Page.Render();

If you place that same function as an export in a 'helpers.mjs' file, import it into the page file, then it doesn't work. So I'll see what I can do to fix that.

And for passing arbitrary objects (not functions) to client JS I might add a new Page.Append* api soon.

Answer 4 · 2023-06-20T08:29:50.000Z

Thanks. A line between build-time and client JS is a little fuzzy here, i think. That's way I assumed that imports should work in a -page file the same as in the -client.
To clear things up, I found this issues first when trying to add build time value, like that:

import key from 'STORAGE_KEY';

Page.AppendJsCall('start', key);

Answer 5 · 2023-06-20T10:00:03.000Z

I won't be able to release a test for an hour or two, but I've made some changes locally and now this works:

helpers.mjs

export const helper1 = "helper1"

export const helper2 = () => "helper2"

export function helper3()
{
    return "helper3";
}

index-page.jsx

import { Page } from '@nakedjsx/core/page';
import { helper1, helper2, helper3 } from './helpers.mjs';
import key from 'STORAGE_KEY';

const helper0 = () => "helper0"

Page.Create('en');
Page.AppendBody(<div />);
Page.AppendJs(helper0);
Page.AppendJs(helper1);
Page.AppendJs(helper2);
Page.AppendJs(helper3);
Page.AppendJs(key);
Page.AppendJs(() => {
  console.log(key);
});
Page.Render();

and with STORAGE_KEY defined on cmd line:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <div></div>
    <script>
        'use strict';
        const helper1 = "helper1";
        const helper2 = () => "helper2";

        function helper3() {
            return "helper3";
        }
        var key = "injected value from config";
        const helper0 = () => "helper0";
        console.log(key);
    </script>
</body>

</html>

Which I think covers a lot of what you want to do

Answer 6 · 2023-06-20T13:52:53.000Z

try 'npx nakedjsx@test`, I just updated it with several improvements in this space

Answer 7 · 2023-06-20T14:23:41.000Z

Thanks for a quick reply! 0.13.0-test.3 seems isn't working, has the same result with string constant.

Answer 8 · 2023-06-20T15:08:50.000Z

Can you show me the page code?

Answer 9 · 2023-06-20T15:14:36.000Z

alert.js

export const alertMe = () => alert('Hello!');

index-page.jsx

import { Page } from '@nakedjsx/core/page';
import { alertMe } from './alert.js';

Page.Create('en');
Page.AppendBody(<div />);
Page.AppendJs(() => alertMe());
Page.Render();

I had this output:

<!DOCTYPE html>
<html lang="en">

<head></head>

<body>
    <div></div>
    <script>
        "use strict";
        alertMe();
    </script>
</body>

</html>

Answer 10 · 2023-06-20T20:49:16.000Z

Ah, you need to first make the function available to client JS. Add this:

Page.AppendJs(alertMe);

Answer 11 · 2023-06-21T04:33:47.000Z

Yes, this way it works. Feel free to close this.

Answer 12 · 2023-06-21T06:06:00.000Z

Cool. Really appreciating the bug reports btw.

Answer 13 · 2023-06-21T08:46:55.000Z

Actually, this shouldn't be necessary, re-opening bug.

Answer 14 · 2023-06-21T14:38:57.000Z

Actually no. Don't want page global magically bleeding over into clent js.