Using imports in page file
Closed this issue · 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>
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?
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.
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);
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
try 'npx nakedjsx@test`, I just updated it with several improvements in this space
Thanks for a quick reply! 0.13.0-test.3
seems isn't working, has the same result with string constant.
Can you show me the page code?
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>
Ah, you need to first make the function available to client JS. Add this:
Page.AppendJs(alertMe);
Yes, this way it works. Feel free to close this.
Cool. Really appreciating the bug reports btw.
Actually, this shouldn't be necessary, re-opening bug.
Actually no. Don't want page global magically bleeding over into clent js.