ZIM on NPM

Questions
1

Hi, I am developing an application using ZIM on NPM ,
How I import the zim_pizzazz , zim_game class into my project?
ps :My app works without Internet, so I cannot use ZIM CDN

2

You can download the CDN files from https://zimjs.com/cdn, put them in a local directory such as scripts/ and point to them with script tags. Here is an example that will run locally https://zimjs.com/local.zip

<script src="scripts/createjs.js"></script>
<script src="scripts/zim_min.js"></script>
<script src="scripts/pizzazz_01.js"></script>
<script src="scripts/pizzazz_02.js"></script>
<script src="scripts/pizzazz_03.js"></script>
<script src="scripts/game_2.7.js"></script>

image
image1847×853 68.6 KB

We had intended to make NPM versions of these for the latest release but are still waiting on advice in that regard. Cheers.

Are you needing NPM for any reason?

1 Like
3

I am accustomed to using NPM in web development, and it makes it easy for me to convert them into mobile applications using Capacitorjs.

4

Sounds compelling. We have scheduled a session on this afternoon to work on this. Will let you know an expected timeline after that.

1 Like
5

Thanks for clarifying! :pray:

6

Okay - whew... 2 hour call. But got the first one made and tested but still need to do the typings and publish, etc. but looks like we will be able to do it... Excellent dev work from @capi421. He really knows his NPM.

1 Like
7

Hi @proinfo - we have added two NPM packages - @zimjs/physics and @zimjs/pizzazz - let us know how it goes. We will continue to add the other helper modules as well and then do an official launch once we confirm they are working. We did a test as follows (just testing imports and typings):

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from "vue"
import { Frame, Circle, Rectangle } from "zimjs"
import { Physics } from "@zimjs/physics"
import { makeIcon } from "@zimjs/pizzazz"

let frame: Frame

onMounted(() => {
  frame = new Frame({
    scaling: "zim",
    width: 600,
    height: 300,
    ready: () => {
        const physics = new Physics();
        physics.drag();
        const circle = new Circle(50, red).center().addPhysics({bounciness:.8});
        const rect = new Rectangle(30,30).centerReg().drag();
        physics.attach(rect, circle);
        makeIcon("settings", red).loc(100,100)
        frame.stage.update()
    },
  })
})

onBeforeUnmount(() => {
  frame.dispose()
})
</script>

<template>
  <div id="zim"></div>
</template>

<style scoped></style>

image
image1069×394 109 KB

image
image1049×412 130 KB

Thanks again to @capi421 for the help on all this!

1 Like
8

Hi, I have imported @zimjs/physics into my project and it is working fine. Thank you very much and @capi421 for his cooperation

1 Like
11

Just doing some of the other modules now and notices a few things with the previous ones. We are updating the typings to include an import of zimjs which will remove the any types that were showing up for each zim object used in physics, etc.

Also, the Frame.dispose() was not disposing physics so unless that is done in the app template it was causing a problem interacting after saving unless a refresh was done. We added a test for physics in the Frame.dispose and now dispose it. So all is good there.

And we are updating to zimjs/createjs rather than danzen/createjs.

We are working through the game module and then will update all the others with these new changes.

12

846×465 18 KB

Okay - so the main ZIM NPM and the game/physics/pizzazz modules have been remade and updated on NPM. Looking good. The now resave without a problem and all the typings we tested are working.

So far the repositories are here:

and then the main ZIM here:

13

Thank you @abstract for your diligent work in improving Zimjs! It’s great to hear about the updates you’re making.
Your dedication to Zimjs development and responsiveness to developer needs are commendable! Keep up the great work! :rocket::clap:

1 Like
14

Ah... just found out that 16.0.15 is a higher version than 16.0.5 so... we will just jump to 16.1.0 and realize that for the next time... we had launched .2, .3, .4, and .5 thinking all those were bigger than .11, .12, .13, .14, an .15.

Also, we were missing the export of the Ticker.

The main ZIM Package has been updated now to 16.1.0

1 Like
15

And... sigh... we just updated the Readme so that the shields are not at the top as they were unfurling awkwardly (something like those last two words...). Here is a test to see if it looks better now:

Hmmm... looks like it is cached - at least to me - here is what I see:

image

Anyway - probably will be better in the future!!

16

We just added Cam and Three modules. Will make an announcement about it all.

We plan to do a little rework of the templates for Vue, React, Svelte, and Angular. But we got the basics tested in these and so far so good. Goodness gracious it was two days of fiddling around with stuff to get typings working, etc.