D
Deno

help

window variable in fresh islands

Rrnbguy3/6/2023
How do I access window in islands? I need to modify DOM code client side.
Jjavi3/6/2023
Check if it’s the browser with IS_BROWSER from $fresh/runtime.ts inside an useEffect hook and you’re all set
ABAltair 680b3/6/2023
You could have a look at ... https://fresh-ssr-spa.deno.dev/
Rrnbguy3/6/2023
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?
Jjavi3/7/2023
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

Looking for more? Join the community!

Recommended Posts
Warning Implicitly using latest version (0.178.0) for...Hello - Deno newb here. When running `deno task start` I get "Warning Implicitly using latest verHow to prevent std/http from gzipping and overriding EtagIt appears deno std/http applies gzip content-encoding magically sometimes depending on the type of Fresh in a Docker exiting processNot sure whats going wrong. Works fine on deno deploy. But when trying to run it inside a docker coneval script with stricter permissions in denoHi all, I wanted to know if its possible to eval a script in deno with more strict permissions. Somesolid-js with DenoI was wondering if it was possible to use solid-js with Deno natively without something like esbuildFeature Suggestion: Dark Mode for `std` library Docs.Deno's documentation is great. I find myself reading it more and more. I currently use a browser addRunning esbuild with esbuild_deno_loaderI've spent probably four or five hours trying to track down this issue, to the point where I actuall`fetch` request always fails onceHello, I got a script containing a `fetch` request. Once in a while, it throws the `connection closeSequentially write to TPC connectionHey, I experience errors when multiple async functions write to a TCP (`Deno.Conn`) connection. How I'd like to change the background colour of the `body` element in Fresh. How do I do that simply?(see title)Deno process watcher. How?This code when compile, runs a simple http server. ```ts import { serve } from "https://deno.land/stmonaco-editor on freshHello. First of all, I am a newbie in web development. I played around with Deno for a while. So I t