Does not fully support frameworks | Read Explanation (Fixed)

[jesvijonathan]

I would call this a critical bug :

So, due to dynamic rendering of frameworks, the library is unable to observe jos elements after re-render, even JOS.init({}) / JOS.reset({}) would not work, for reason it is not able to get the elements from inner view/component

So what works in frameworks ? well, anything in main index html works properly but any jos element inside of a component does not get recognised.

It works with my custom framework tho ;)

EDIT : I have updated the Readme with latest details.. consider this thread as a archive do check the Readme and installation/setup for details on settings up JOS on Dynamic Frameworks

[jesvijonathan]

Fixed !

This issue has been resolved with the new JOS.refresh() property in v0.8

Previous implementation included a one time initialization method that captured JOS elements onload and could not capture newly rendered elements in the DOM. thus could not keep track of the JOS element...

However, the new version does fix that. Now you can call the refresh() method whenever the SPA/DOM updates a component or maybe even a during a explicit DOM change.. where you can invoke refresh to capture all newly added elements

you can call the refresh method during each page/view/component render

Tested & fully works with Vue.js, Angular, Next.js, J-SPA, HTML/JS frameworks :)

[jesvijonathan]

There you go, https://jos-animation.vercel.app

Vue3.js -

import { createApp } from "vue";
import { watch, nextTick } from "vue";

import "jos-animation/dist/jos.css";
import JOS from "jos-animation";

import App from "./App.vue"; 

const app = createApp(App); 
app.mount("#app");

JOS.init();
//JOS.version();

watch(
  () => router.currentRoute.value,
  () => {
    nextTick(() => {
      JOS.refresh();
    });
  }
);

// To observe elements after a route change

[jesvijonathan]

There you go, https://azzle.netlify.app

React.js -

import "jos-animation/dist/jos.css";
import JOS from "jos-animation/dist/jos.js";

onload = () => {
  const options = {
    debugMode: true,
    animation: "flip",
    duration: 0.7,
    rootMargin: "0% 0% 0% 0%",
  };
  JOS.init(options);
  //JOS.version();
};

function Main() {
  useEffect(() => {
    JOS.refresh();
  }, []);
  // To observe elements after a route change

  return (
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Main />);

React has a weird way of handling html attributes, apart from that everything else is same. Will work work on JOS for react specifically

[jesvijonathan]

There you go, https://bitspace-nextjs-jos.vercel.app/

Next.js -

import { useEffect, useState } from "react";

import "jos-animation/dist/jos.css";
import jos from "jos-animation/dist/jos.js";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
const jos_options = {
    debugMode: false,
    passive: true,
    animation: "fade",
    duration: 0.4,
    rootMargin: "20% 0% 30% 0%",
  };
  
  useEffect(() => {
    jos.init(jos_options);
  }, []); // Once 

  useEffect(() => {
    jos.refresh();
  }); // For every update
  
  return ();
}
// To observe elements after a route change

[jesvijonathan]

Angular -

import { Component, OnInit, AfterViewInit } from '@angular/core';

import JOS from 'jos-animation';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {

  ngOnInit(): void {
    JOS.init();
  }

  ngAfterViewInit(): void {
    JOS.refresh();
  }

}

For the module declaration you need to create a types\jos-animation folder at the root of the Angular project and then put an index.d.ts inside of it with the following

declare module 'jos-animation' {
    const JOS: any;
    export default JOS;
}

Then tell your project to search that folder when looking for types by adding this to your tsconfig.json

    "typeRoots": [
      "types",
      "node_modules/@types"
    ],

Note: I believe this index.d.ts file could be added into the project and declare what types are actually supported so that people wouldn't have to do it manually and to add type safety. All I'm doing is declaring an any type to get rid of the typescript errors.

You can also refer issue #41

Special thanks to @edavis1993 !