zikofy 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/README.md +30 -1
  2. package/package.json +1 -1
  3. package/src/preact/index.d.ts +2 -2
  4. package/src/svelte/domify.js +1 -0
  5. package/src/svelte/index.d.ts +6 -7
  6. package/src/vue/index.d.ts +5 -5
  7. package/demos/solid/README.md +0 -28
  8. package/demos/solid/index.html +0 -13
  9. package/demos/solid/package-lock.json +0 -1900
  10. package/demos/solid/package.json +0 -18
  11. package/demos/solid/public/vite.svg +0 -1
  12. package/demos/solid/src/App.css +0 -27
  13. package/demos/solid/src/App.jsx +0 -35
  14. package/demos/solid/src/assets/solid.svg +0 -1
  15. package/demos/solid/src/index.css +0 -68
  16. package/demos/solid/src/index.jsx +0 -11
  17. package/demos/solid/vite.config.js +0 -6
  18. package/demos/svelte/.vscode/extensions.json +0 -3
  19. package/demos/svelte/README.md +0 -43
  20. package/demos/svelte/index.html +0 -13
  21. package/demos/svelte/jsconfig.json +0 -33
  22. package/demos/svelte/package-lock.json +0 -1374
  23. package/demos/svelte/package.json +0 -16
  24. package/demos/svelte/public/vite.svg +0 -1
  25. package/demos/svelte/src/App.svelte +0 -47
  26. package/demos/svelte/src/app.css +0 -79
  27. package/demos/svelte/src/assets/svelte.svg +0 -1
  28. package/demos/svelte/src/lib/Counter.svelte +0 -10
  29. package/demos/svelte/src/main.js +0 -12
  30. package/demos/svelte/svelte.config.js +0 -8
  31. package/demos/svelte/vite.config.js +0 -7
  32. package/demos/vue/.vscode/extensions.json +0 -3
  33. package/demos/vue/README.md +0 -5
  34. package/demos/vue/index.html +0 -13
  35. package/demos/vue/package-lock.json +0 -1334
  36. package/demos/vue/package.json +0 -18
  37. package/demos/vue/public/vite.svg +0 -1
  38. package/demos/vue/src/App.vue +0 -30
  39. package/demos/vue/src/assets/vue.svg +0 -1
  40. package/demos/vue/src/components/HelloWorld.vue +0 -43
  41. package/demos/vue/src/main.js +0 -9
  42. package/demos/vue/src/style.css +0 -79
  43. package/demos/vue/vite.config.js +0 -7
package/README.md CHANGED
@@ -1 +1,30 @@
1
- # zikofy
1
+ # zikofy
2
+
3
+ Turns foreign components into native zikojs `UIElement`
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm i zikofy
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```js
14
+ import { zikofy } from 'zikofy/[UI_Library]'
15
+ import ForeignCompoent from './ForeignComponent'
16
+
17
+ const props = {}
18
+ const ZikoComponent = zikofy(ForeignComponent, props)
19
+
20
+ ```
21
+
22
+ ## Current Supports
23
+
24
+ |Library|Mount|Props|
25
+ |-|-|-|
26
+ |react|✅||
27
+ |preact|✅||
28
+ |solid|✅|✅|
29
+ |svelte|✅|✅|
30
+ |vue|✅||
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zikofy",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "",
5
5
  "exports" : {
6
6
  "./*" : {
package/src/preact/index.d.ts CHANGED
@@ -3,10 +3,10 @@ import { ComponentType, JSX } from 'preact';
3
3
  export declare function domify<P = {}>(
4
4
  Component: ComponentType<P> | JSX.Element,
5
5
  props?: P
6
- ): HTMLElement | null;
6
+ ): HTMLElement | HTMLElement[];
7
7
 
8
8
  export declare function zikofy<P = {}>(
9
9
  Component: ComponentType<P> | JSX.Element,
10
10
  props?: P
11
- ): UIElement;
11
+ ): UIElement | UIElement[];
12
12
 
package/src/svelte/domify.js CHANGED
@@ -4,6 +4,7 @@ export function domify(Component, props = {}) {
4
4
 
5
5
  mount(Component, {
6
6
  target: container,
7
+ props
7
8
  })
8
9
 
9
10
  if (container.children.length === 1) return container.firstChild;
package/src/svelte/index.d.ts CHANGED
@@ -1,12 +1,11 @@
1
- import { JSX } from "solid-js";
2
1
  import { UIElement } from "ziko/ui";
3
2
 
4
- export declare function domify<P = {}>(
5
- Component: ((props: P) => JSX.Element) | JSX.Element,
3
+ export declare function domify(
4
+ Component: any,
6
5
  props?: P
7
- ): HTMLElement | null;
6
+ ): HTMLElement | HTMLElement[];
8
7
 
9
- export declare function zikofy<P = {}>(
10
- Component: ((props: P) => JSX.Element) | JSX.Element,
8
+ export declare function zikofy(
9
+ Component: any,
11
10
  props?: P
12
- ): UIElement;
11
+ ): UIElement | UIElement[];
package/src/vue/index.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- import { JSX } from "solid-js";
1
+ import { Component, VNode } from "vue";
2
2
  import { UIElement } from "ziko/ui";
3
3
 
4
4
  export declare function domify<P = {}>(
5
- Component: ((props: P) => JSX.Element) | JSX.Element,
5
+ Component: Component | ((props: P) => VNode),
6
6
  props?: P
7
- ): HTMLElement | null;
7
+ ): HTMLElement | HTMLElement[];
8
8
 
9
9
  export declare function zikofy<P = {}>(
10
- Component: ((props: P) => JSX.Element) | JSX.Element,
10
+ Component: Component | ((props: P) => VNode),
11
11
  props?: P
12
- ): UIElement;
12
+ ): UIElement | UIElement[];
package/demos/solid/README.md DELETED
@@ -1,28 +0,0 @@
1
- ## Usage
2
-
3
- ```bash
4
- $ npm install # or pnpm install or yarn install
5
- ```
6
-
7
- ### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
8
-
9
- ## Available Scripts
10
-
11
- In the project directory, you can run:
12
-
13
- ### `npm run dev`
14
-
15
- Runs the app in the development mode.<br>
16
- Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
17
-
18
- ### `npm run build`
19
-
20
- Builds the app for production to the `dist` folder.<br>
21
- It correctly bundles Solid in production mode and optimizes the build for the best performance.
22
-
23
- The build is minified and the filenames include the hashes.<br>
24
- Your app is ready to be deployed!
25
-
26
- ## Deployment
27
-
28
- Learn more about deploying your application with the [documentations](https://vite.dev/guide/static-deploy.html)
package/demos/solid/index.html DELETED
@@ -1,13 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>solidjs</title>
8
- </head>
9
- <body>
10
- <div id="root"></div>
11
- <script type="module" src="/src/index.jsx"></script>
12
- </body>
13
- </html>