Useful links:

• https://zimjs.com
• https://www.npmjs.com/package/zimjs
• https://github.com/danzen/zimjs
• https://zimjs.slack.com

Instructions

1. Download the CODE (green button on main page)
2. Unzip, copy a desired template folder, and rename it
3. Drop the folder on an editor such as VS Code.
4. Open a terminal (CTRL ` )

If you are using React, Vue, Svelte

5. Run npm install
6. Run npm run dev

If you are have Angular and haven't done so already, install it globally by running

npm install -g @angular/cli

5. Run npm install
6. Run ng serve

Helper Modules

Using ZIM without typescript

VUE - with zim namespace

<script setup>  
  import { onMounted, onBeforeUnmount } from "vue";
  import zim from "zimjs";
  let frame;
  onMounted(() => {
    frame = new zim.Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new zim.Circle(50, red).center().drag();
      }
    });
  });
  onBeforeUnmount(() => {
    frame.dispose();
  });  
</script>
<template>
  <div id="zim"></div>
</template>
<style>
</style>

VUE - without zim namespace

<script setup>  
  import { onMounted, onBeforeUnmount } from "vue";
  import zim from "zimjs";
  zim.zimplify(); // make zim commands global
  let frame;
  onMounted(() => {
    frame = new Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new Circle(50, red).center().drag();
      }
    });
  });
  onBeforeUnmount(() => {
    frame.dispose();
  });  
</script>
<template>
  <div id="zim"></div>
</template>
<style>
</style>

SVELTE - with zim namespace

<script >  
  import { onMount, onDestroy } from "svelte";
  import zim from "zimjs";
  let frame: Frame;
  onMount(() => {
    frame = new zim.Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new zim.Circle(50, red).center().drag();
      }
    });
    function ready() {
      // put code here
      new zim.Circle(50, red).center().drag();
    }
  });
  onDestroy(() => {
    frame.dispose();
  });
</script>
<main>
  <div id="zim">
</main>
<style>
</style>

SVELTE - without zim namespace

<script>  
  import { onMount, onDestroy } from "svelte";
  import zim from "zimjs";
  zim.zimplify(); // make zim commands global
  
  let frame;
  onMount(() => {
    frame = new Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new Circle(50, red).center().drag();
      }
    });
  });
  onDestroy(() => {
    frame.dispose();
  });
</script>
<main>
  <div id="zim">
</main>
<style>
</style>

REACT - with zim namespace

<script>
    import { Component, ReactNode, StrictMode } from "react";
    import "./App.css";
    import zim from "zimjs";
    class ZimFrame extends Component {
      frame: zim.Frame | undefined;
  
      componentDidMount(): void {
          this.frame = new zim.Frame({
            scaling: "zim",
            width: 500,
            height: 400,
            color:light,
            ready: () => {
                // put code here
                new zim.Circle(50, red).center().drag();
            }
          });
      }
      componentWillUnmount(): void {
          this.frame?.dispose();
      }
      render(): ReactNode {
          return null;
      }
    }
    function App() {
      return (
          <>
          <div>
              {/* Move StrictMove from the root to here */}
              <StrictMode>
              <div id='zim'></div>
              </StrictMode>
              {/* Include ZIM code outside StrictMode */}
              <ZimFrame />
          </div>
          </>
      )
    }
    export default App;
</script>

REACT - without zim namespace

<script>
    import { Component, ReactNode, StrictMode } from "react";
    import "./App.css";
    import zim from "zimjs";
    zim.zimplify(); // make zim commands global
    class ZimFrame extends Component {
      frame: Frame | undefined;
  
      componentDidMount(): void {
          this.frame = new Frame({
            scaling: "zim",
            width: 500,
            height: 400,
            color:light,
            ready: () => {
                // put code here
                new Circle(50, red).center().drag();
            }
          });
      }
      componentWillUnmount(): void {
          this.frame?.dispose();
      }
      render(): ReactNode {
          return null;
      }
    }
    function App() {
      return (
          <>
          <div>
              {/* Move StrictMove from the root to here */}
              <StrictMode>
              <div id='zim'></div>
              </StrictMode>
              {/* Include ZIM code outside StrictMode */}
              <ZimFrame />
          </div>
          </>
      )
    }
    export default App;
</script>

Special Thanks

Dr Abstract @danzen