zikofy 0.0.0 → 0.2.0

package/demos/solid/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "solidjs",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.9.10"
+  },
+  "devDependencies": {
+    "vite": "^7.2.4",
+    "vite-plugin-solid": "^2.11.10"
+  }
+}

package/demos/solid/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/demos/solid/src/App.css

@@ -0,0 +1,27 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.solid:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/demos/solid/src/App.jsx

@@ -0,0 +1,35 @@
+import { createSignal } from 'solid-js'
+import solidLogo from './assets/solid.svg'
+import viteLogo from '/vite.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = createSignal(0)
+
+  return (
+    <>
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} class="logo" alt="Vite logo" />
+        </a>
+        <a href="https://solidjs.com" target="_blank">
+          <img src={solidLogo} class="logo solid" alt="Solid logo" />
+        </a>
+      </div>
+      <h1>Vite + Solid</h1>
+      <div class="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count()}
+        </button>
+        <p>
+          Edit <code>src/App.jsx</code> and save to test HMR
+        </p>
+      </div>
+      <p class="read-the-docs">
+        Click on the Vite and Solid logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default App

package/demos/solid/src/assets/solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>

package/demos/solid/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/demos/solid/src/index.jsx

@@ -0,0 +1,11 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+import './index.css'
+import App from './App.jsx'
+import { domify, zikofy } from 'zikofy/solid'
+
+globalThis.app = zikofy(App)
+
+const root = document.getElementById('root')
+globalThis.root = root
+// render(() => <App />, root)

package/demos/solid/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solid()],
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zikofy",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "description": "",
   "exports" : {
     "./*" : {
@@ -10,7 +10,10 @@
   },
   "keywords": [
     "ziko",
-    "zikojs"
+    "zikojs",
+    "react",
+    "preact",
+    "solid"
   ],
   "homepage": "https://github.com/zakarialaoui10/zikofy#readme",
   "bugs": {

package/src/preact/domify.js

@@ -0,0 +1,11 @@
+import { render, h } from 'preact';
+
+export function domify(Component, props) {
+    const container = document.createElement('div')
+    render(
+        h(Component, props), 
+        container
+    )
+    if(container.children.length === 1) return container.firstChild;
+    return [...container.children];
+}

package/src/preact/index.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType, JSX } from 'preact';
+
+export declare function domify<P = {}>(
+  Component: ComponentType<P> | JSX.Element,
+  props?: P
+): HTMLElement | null;
+
+export declare function zikofy<P = {}>(
+  Component: ComponentType<P> | JSX.Element,
+  props?: P
+): UIElement;
+

package/src/preact/index.js

@@ -0,0 +1,2 @@
+export * from './domify.js';
+export * from './zikofy.js';

package/src/preact/zikofy.js

@@ -0,0 +1,10 @@
+import { UIElement } from 'ziko/ui';
+import { domify } from './domify.js';
+
+export function zikofy(Component, props) {
+    const DOMIFIED = domify(Component, props)
+    return Array.isArray(DOMIFIED) 
+            ? DOMIFIED.map( el => new UIElement({ element : el }))
+            : new UIElement({ element : DOMIFIED })
+}
+

package/src/react/zikofy.js

@@ -1,7 +1,10 @@
-import { UIElement } from "ziko/ui";
-import { domify } from "./domify.js"
+import { UIElement } from 'ziko/ui';
+import { domify } from './domify.js';
+
+export function zikofy(Component, props) {
+    const DOMIFIED = domify(Component, props)
+    return Array.isArray(DOMIFIED) 
+            ? DOMIFIED.map( el => new UIElement({ element : el }))
+            : new UIElement({ element : DOMIFIED })
+}
 
-export const zikofy = (Component, props = {}) => {
-  const el = domify(Component, props)
-  return new UIElement({ element : el})
-};

package/src/solid/domify.js

@@ -0,0 +1,16 @@
+import { render } from "solid-js/web";
+
+export function domify(Component, props = {}) {
+  const container = document.createElement("div");
+
+  render(() => {
+    if (typeof Component === "function") {
+      return Component(props);
+    }
+    return Component;
+  }, container);
+
+  if(container.children.length === 1) return container.firstChild;
+  return [...container.children];
+
+}

package/src/solid/index.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from "solid-js";
+import { UIElement } from "ziko/ui";
+
+export declare function domify<P = {}>(
+  Component: ((props: P) => JSX.Element) | JSX.Element,
+  props?: P
+): HTMLElement | null;
+
+export declare function zikofy<P = {}>(
+  Component: ((props: P) => JSX.Element) | JSX.Element,
+  props?: P
+): UIElement;

package/src/solid/index.js

@@ -0,0 +1,2 @@
+export * from './domify.js';
+export * from './zikofy.js';

package/src/solid/zikofy.js

@@ -0,0 +1,10 @@
+import { UIElement } from 'ziko/ui';
+import { domify } from './domify.js';
+
+export function zikofy(Component, props) {
+    const DOMIFIED = domify(Component, props)
+    return Array.isArray(DOMIFIED) 
+            ? DOMIFIED.map( el => new UIElement({ element : el }))
+            : new UIElement({ element : DOMIFIED })
+}
+