update api

Author: Mokshit06

README.md

@@ -26,7 +26,7 @@ Currently Sveltris only supports React, but might support others soon.
 ```html
 <script>
   import { useCounter } from 'some-lib';
-  import { use } from 'sveltris';
+  import { use } from 'sveltris/svelte';
 
   const counter = use(useCounter());
 </script>

docs/pages/docs/installation.mdx

@@ -31,7 +31,7 @@ import { Tab, Tabs, Steps, Callout } from 'nextra-theme-docs'
 <Tabs items={["Esbuild",  "Vite", "Webpack"]}>
   <Tab>
     ```js
-    const { sveltrisEsbuildPlugins } = require("sveltris/esbuild")
+    const { sveltrisEsbuildPlugins } = require("sveltris")
     const esbuild = require('esbuild')
 
     esbuild.build({
@@ -44,23 +44,34 @@ import { Tab, Tabs, Steps, Callout } from 'nextra-theme-docs'
   </Tab>
   <Tab>
   ```js filename="vite.config.js"
-  import { sveltrisVitePlugin } from "sveltris/vite"
+  import { sveltrisVitePlugins } from "sveltris"
   import { defineConfig } from 'vite';
 
   export default defineConfig({
     plugins: [
-      sveltrisVitePlugin()
+      ...sveltrisVitePlugins()
     ]
   })
   ```
   </Tab>
   <Tab>
   ```js filename="webpack.config.js"
-  const { SveltrisWebpackPlugin } = require("sveltris/webpack")
+  const { sveltrisWebpackPlugins } = require("sveltris")
 
   module.exports = {
     plugins: [
-      new SveltrisWebpackPlugin()
+      ...sveltrisWebpackPlugins()
+    ]
+  }
+  ```
+  </Tab>
+    <Tab>
+  ```js filename="rollup.config.js"
+  const { sveltrisRollupPlugins } = require("sveltris")
+
+  module.exports = {
+    plugins: [
+      ...sveltrisRollupPlugins()
     ]
   }
   ```

docs/pages/docs/usage/hooks.mdx

@@ -14,7 +14,7 @@ Sveltris allows you to use React hooks inside your Svelte component by wrapping
 ```html
 <script>
 import { useState } from 'react'
-import { use } from 'sveltris'
+import { use } from 'sveltris/react'
 
 const counter = use(useState(0))
 </script>

package.json

@@ -9,13 +9,12 @@
       "node": "./dist/react/node.js",
       "default": "./dist/react/browser.js"
     },
-    "./react/plugin": "./dist/react/plugin.js",
     "./svelte": {
       "browser": "./dist/svelte/browser.mjs",
       "node": "./dist/svelte/node.js",
       "default": "./dist/svelte/browser.js"
     },
-    "./svelte/plugin": "./dist/svelte/plugin.js"
+    ".": "./dist/index.js"
   },
   "scripts": {
     "build": "tsup",

src/index.ts

@@ -0,0 +1,22 @@
+import { sveltrisReactInSvelte } from './svelte/plugin';
+import { sveltrisSvelteInReact } from './react/plugin';
+
+export const sveltrisEsbuildPlugins = () => [
+  sveltrisReactInSvelte.esbuild(),
+  sveltrisSvelteInReact.esbuild(),
+];
+
+export const sveltrisWebpackPlugins = () => [
+  sveltrisReactInSvelte.webpack(),
+  sveltrisSvelteInReact.webpack(),
+];
+
+export const sveltrisVitePlugins = () => [
+  sveltrisReactInSvelte.vite(),
+  sveltrisSvelteInReact.vite(),
+];
+
+export const sveltrisRollupPlugins = () => [
+  sveltrisReactInSvelte.rollup(),
+  sveltrisSvelteInReact.rollup(),
+];

src/react/plugin.ts

@@ -2,9 +2,9 @@ import path from 'path';
 import { createUnplugin } from 'unplugin';
 import { outdent } from 'outdent';
 
-const svelteInReact = createUnplugin((options: {}) => {
+export const sveltrisSvelteInReact = createUnplugin((options: {}) => {
   return {
-    name: 'svelte-in-react',
+    name: 'sveltris-svelte-in-react',
     transformInclude(id) {
       return id.endsWith('?in-react');
     },
@@ -27,9 +27,3 @@ const svelteInReact = createUnplugin((options: {}) => {
     },
   };
 });
-
-export const {
-  esbuild: svelteInReactEsbuildPlugin,
-  vite: svelteInReactVitePlugin,
-  webpack: svelteInReactWebpackPlugin,
-} = svelteInReact;

src/svelte/browser.ts

@@ -34,9 +34,9 @@ export function setupEvents(node: HTMLElement, obj: any) {
   };
 }
 
-function createReactApp(hook: any, args: any, store: any) {
+function createReactApp(hookFn: any, store: any) {
   return function ReactApp() {
-    const _state = hook(...(get(args) as any));
+    const _state = hookFn();
 
     React.useEffect(() => {
       store.set(_state);
@@ -46,11 +46,11 @@ function createReactApp(hook: any, args: any, store: any) {
   };
 }
 
-export function use(hook: any, args = [], ctxs = []) {
+export function use(hookFn: any, ctxs = []) {
   let store = writable(null);
   let ReactApp = createReactApp(
-    hook,
-    (args as any).subscribe ? args : readable(args),
+    hookFn,
+    // (args as any).subscribe ? args : readable(args),
     store
   );
 

src/svelte/plugin.ts

@@ -2,19 +2,19 @@ import path from 'path';
 import { createUnplugin } from 'unplugin';
 import { outdent } from 'outdent';
 
-const reactInSvelte = createUnplugin(() => {
+export const sveltrisReactInSvelte = createUnplugin(() => {
   return {
-    name: 'react-in-svelte',
+    name: 'sveltris-react-in-svelte',
     resolveId(id) {
-      if (/^react-in-svelte.svelte/.test(id)) {
+      if (/^sveltris-react-in-svelte.svelte/.test(id)) {
         return { id: id };
       }
     },
     loadInclude(id) {
-      return /^react-in-svelte.svelte/.test(id);
+      return /^sveltris-react-in-svelte.svelte/.test(id);
     },
     load(id) {
-      if (/^react-in-svelte.svelte\?path=/.test(id)) {
+      if (/^sveltris-react-in-svelte.svelte\?path=/.test(id)) {
         return outdent`
         <script>
           import { onMount, createEventDispatcher, onDestroy, afterUpdate } from 'svelte';
@@ -64,7 +64,7 @@ const reactInSvelte = createUnplugin(() => {
       const { name } = path.parse(id);
 
       return outdent`
-      import Comp$${name} from "react-in-svelte.svelte?path=${id.replace(
+      import Comp$${name} from "sveltris-react-in-svelte.svelte?path=${id.replace(
         '?in-svelte',
         ''
       )}"
@@ -74,9 +74,3 @@ const reactInSvelte = createUnplugin(() => {
     },
   };
 });
-
-export const {
-  esbuild: reactInSvelteEsbuildPlugin,
-  vite: reactInSvelteVitePlugin,
-  webpack: reactInSvelteWebpackPlugin,
-} = reactInSvelte;

tsup.config.ts

@@ -7,8 +7,9 @@ export default defineConfig({
     'src/react/node.tsx',
     'src/svelte/browser.ts',
     'src/svelte/node.ts',
-    'src/svelte/plugin.ts',
-    'src/react/plugin.ts',
+    'src/index.ts',
+    // 'src/svelte/plugin.ts',
+    // 'src/react/plugin.ts',
   ],
   splitting: false,
   clean: true,