Ziko-wrapper

Ziko-Wrapper is a tool that facilitates the rendering of ZikoJS elements within other frameworks and the embedding of framework-specific components into ZikoJS, enabling seamless integration and interoperability between different ecosystems.

Current Support Table for Ziko-Wrapper

|Framework/Library|Integrate ZikoJS|Get Integrated in ZikoJS|Remark| |-|-|-|-| |React|✅ Supported|✅ Supported| |Svelte|✅ Supported|✅ Supported| |Solid|✅ Supported|✅ Supported| |Vue|✅ Supported|✅ Supported| |Preact|✅ Supported|✅ Supported| |Astro|✅ Supported|❌ Not Supported|Astro |Next|✅ Supported|❌ Not Supported| |Remix|✅ Supported|❌ Not Supported| |SvelteKit|✅ Supported|❌ Not Supported| |React Native|✅ Supported|❌ Not Supported|

Integrate Zikojs inside Other Environment

UI Decalaration

// HelloFromZiko.js
import {h1} from "ziko"
export default HelloFromZiko=({color})=>{
    return h1(`Hello World, this is a Zikojs component.`).style({
        color
    })
}

Use

JSX Based

import ZikoWrapper from "ziko-wrapper/react"
// import ZikoWrapper from "ziko-wrapper/solid"
// import ZikoWrapper from "ziko-wrapper/preact"
import HelloFromZiko from "./HelloFromZiko.js"
export default function App(){
    return (
        <ZikoWrapper>
           <HelloFromZiko 
              color="blue"  
            />
        </ZikoWrapper>
    )
 }

Vue

<script>
import ZikoWrapper from "ziko-wrapper/vue"
import HelloFromZiko from "./HelloFromZiko.js"
</script>
<template>
    <ZikoWrapper>
           <HelloFromZiko 
              color="green"  
            />
    </ZikoWrapper>
</template>

Svelte

---
import ZikoWrapper from "ziko-wrapper/svelte";
import HelloFromZiko from "./HelloFromZiko.js"
---
<ZikoWrapper ui={HelloFromZiko({color:"orange"})}/>

Astro

• Customize the astro.config.mjs file

import { defineConfig } from 'astro/config';
import ziko from "ziko-wrapper/astro"
export default defineConfig({
    integrations : [
        ziko()
    ]
})

• Define The component

// HelloFromZikoJs.js
import {p} from "ziko"
export default HelloFromZikoJs=({color})=>p("Hello From Zikojs").style({color})

• Render The component

---
 import HelloFromZiko from "./HelloFromZiko.js"
---
<HelloFromZiko 
  color="orange"
  client:only 
/>

Integrate Other Framewrok components inside Zikojs

React

Solid

Svelte

Vue

Preact

Supports

Licence