-
-
Notifications
You must be signed in to change notification settings - Fork 6
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Does not fully support frameworks | Read Explanation (Fixed) #15
Comments
Fixed !This issue has been resolved with the new 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 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 :) |
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 |
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 |
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 |
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 ! |
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
The text was updated successfully, but these errors were encountered: