rnbguy•2y ago

window variable in fresh islands

How do I access window in islands? I need to modify DOM code client side.

4 Replies

javi•2y ago

Check if it’s the browser with IS_BROWSER from $fresh/runtime.ts inside an useEffect hook and you’re all set

NDH•2y ago

You could have a look at ... https://fresh-ssr-spa.deno.dev/

rnbguyOP•2y 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•2y 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