rnbguy
rnbguy2y ago

window variable in fresh islands

How do I access window in islands? I need to modify DOM code client side.
4 Replies
javi
javi2y ago
Check if it’s the browser with IS_BROWSER from $fresh/runtime.ts inside an useEffect hook and you’re all set
Fifth-Normal-Form always
You could have a look at ... https://fresh-ssr-spa.deno.dev/
rnbguy
rnbguyOP2y ago
wow. this really helped. but I am stuck at similar other things. basically, I am trying to port this code in fresh. how do I import the <script/> tags? https://github.com/microsoft/monaco-editor/blob/main/samples/browser-script-editor/index.html I came this far,
export default function Run() {
const editorRef = useRef(null);
const consoleText = signal("Click run to run..");
const revText = computed(() =>
consoleText.value.split("").reverse().join("")
);

let editor = null;

useEffect(() => {
if (IS_BROWSER) {
require.config({
paths: { vs: "https://unpkg.com/monaco-editor/min/vs" },
});

if (monaco !== undefined) {
editor = monaco.editor.create(editorRef.current, {
value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join(
"\n",
),
language: "javascript",
});
}
}
});

return (
<div class="gap-2 w-full">
<div
ref={editorRef}
class="rounded min-w-full min-h-[30rem] overflow-x-auto bg-gray-100"
/>

<Button
class="mx-auto items-center"
onClick={() => {consoleText.value = editor.getValue()}}
>
Run
</Button>

<div class="rounded min-w-full min-h-[30rem] overflow-x-auto bg-gray-100">
{revText}
</div>

<link
rel="stylesheet"
data-name="vs/editor/editor.main"
href="https://unpkg.com/monaco-editor/min/vs/editor/editor.main.css"
/>

<script src="https://unpkg.com/monaco-editor/min/vs/loader.js" />
<script src="https://unpkg.com/monaco-editor/min/vs/editor/editor.main.nls.js" />
<script src="https://unpkg.com/monaco-editor/min/vs/editor/editor.main.js" />
</div>
);
}
export default function Run() {
const editorRef = useRef(null);
const consoleText = signal("Click run to run..");
const revText = computed(() =>
consoleText.value.split("").reverse().join("")
);

let editor = null;

useEffect(() => {
if (IS_BROWSER) {
require.config({
paths: { vs: "https://unpkg.com/monaco-editor/min/vs" },
});

if (monaco !== undefined) {
editor = monaco.editor.create(editorRef.current, {
value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join(
"\n",
),
language: "javascript",
});
}
}
});

return (
<div class="gap-2 w-full">
<div
ref={editorRef}
class="rounded min-w-full min-h-[30rem] overflow-x-auto bg-gray-100"
/>

<Button
class="mx-auto items-center"
onClick={() => {consoleText.value = editor.getValue()}}
>
Run
</Button>

<div class="rounded min-w-full min-h-[30rem] overflow-x-auto bg-gray-100">
{revText}
</div>

<link
rel="stylesheet"
data-name="vs/editor/editor.main"
href="https://unpkg.com/monaco-editor/min/vs/editor/editor.main.css"
/>

<script src="https://unpkg.com/monaco-editor/min/vs/loader.js" />
<script src="https://unpkg.com/monaco-editor/min/vs/editor/editor.main.nls.js" />
<script src="https://unpkg.com/monaco-editor/min/vs/editor/editor.main.js" />
</div>
);
}
This works fine. but I would prefer not to use the <script/> and <link/> tags. How do I do this cleanly in fresh?
javi
javi2y ago
I’ve just come across that problem when doing another project. What I did was create an async function inside an useEffect, and import dynamically the module. After that normally a global variable is created, so you declare it at the top of the file
declare class Example {
private test: number;
constructor(test: number);
}
declare class Example {
private test: number;
constructor(test: number);
}
After awaiting the import you can use the variable inside the hook, inside the is browser if