Initial commit

.github/workflows/ci.yml

@@ -0,0 +1,77 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Install
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Install
+        run: pnpm install
+
+      - name: Typecheck
+        run: pnpm typecheck
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Install
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+
+      - name: Test
+        run: pnpm test

.github/workflows/release.yml

@@ -0,0 +1,31 @@
+name: Release
+
+permissions:
+  contents: write
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - run: npx changelogithub
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+dist
+*.log

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+	"editor.formatOnSave": true,
+	"editor.defaultFormatter": "biomejs.biome"
+}

README.md

@@ -0,0 +1,79 @@
+# Slotz
+
+Teleport React components to anywhere in the react-tree.
+
+> Modernized from [react-slot-fill](https://github.com/camwest/react-slot-fill)
+
+## Installation
+
+```bash
+npm install @marimo-team/react-slotz
+# or
+pnpm install @marimo-team/react-slotz
+```
+
+## Example
+
+```tsx
+// slotz.js
+const Toolbar = () => {
+  return (
+    <nav>
+      <Slot name="Toolbar.Item" />
+    </nav>
+  );
+};
+Toolbar.Item = ({ label }: { label: string }) => (
+  <Fill name="Toolbar.Item">
+    <button>{label}</button>
+  </Fill>
+);
+
+const Footer = () => {
+  return (
+    <footer>
+      <Slot name="Footer.Item" />
+    </footer>
+  );
+};
+Footer.Item = ({ href, label }: { href: string; label: string }) => (
+  <Fill name="Footer.Item">
+    <a href={href}>{label}</a>
+  </Fill>
+);
+
+// my-page.js
+const Feature = () => {
+  return (
+    <div>
+      <Toolbar.Item label="Home 2" />
+      <Toolbar.Item label="About" />
+      <Footer.Item label="Twitter" href="twitter.com/reactjs" />
+    </div>
+  );
+};
+
+const MyPage = () => {
+  return (
+    <Provider>
+      <div className="main">
+        <Toolbar />
+        <Footer />
+        <Feature />
+      </div>
+    </Provider>
+  );
+};
+
+// HTML
+<div className="main">
+  <nav>
+    <button>Home 2</button>
+    <button>About</button>
+  </nav>
+  <footer>
+    <a href="twitter.com/reactjs">Twitter</a>
+  </footer>
+  <div />
+</div>;
+```

biome.json

@@ -0,0 +1,31 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"files": {
+		"ignore": ["dist"]
+	},
+	"formatter": {
+		"enabled": true
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true,
+			"suspicious": {
+				"noExplicitAny": "off",
+				"noImplicitAnyLet": "off"
+			},
+			"correctness": {
+				"useExhaustiveDependencies": "off"
+			},
+			"style": {
+				"noNonNullAssertion": "off"
+			},
+			"complexity": {
+				"noForEach": "off"
+			}
+		}
+	}
+}

package.json

@@ -0,0 +1,61 @@
+{
+	"name": "@marimo-team/react-slotz",
+	"version": "0.1.0",
+	"description": "Teleport React components into anywhere into the react-tree.",
+	"author": "marimo",
+	"license": "MIT",
+	"publishConfig": {
+		"access": "public"
+	},
+	"sideEffects": false,
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.cjs"
+		}
+	},
+	"main": "./dist/index.mjs",
+	"module": "./dist/index.mjs",
+	"types": "./dist/index.d.ts",
+	"typesVersions": {
+		"*": {
+			"*": ["./dist/*", "./dist/index.d.ts"]
+		}
+	},
+	"files": ["dist"],
+	"scripts": {
+		"build": "unbuild",
+		"dev": "unbuild --stub",
+		"lint": "biome check --apply .",
+		"prepublishOnly": "pnpm build",
+		"release": "bumpp && npm publish",
+		"test": "vitest",
+		"typecheck": "tsc --noEmit",
+		"prepare": "simple-git-hooks"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^1.7.3",
+		"@vitejs/plugin-react": "^4.2.1",
+		"bumpp": "^9.4.1",
+		"lint-staged": "^15.2.2",
+		"pnpm": "^9.0.2",
+		"prettier": "3.2.5",
+		"rimraf": "^5.0.5",
+		"simple-git-hooks": "^2.11.1",
+		"tsup": "8.0.2",
+		"typescript": "^5.4.5",
+		"unbuild": "^2.0.0",
+		"vitest": "^1.6.0"
+	},
+	"dependencies": {
+		"@babel/preset-env": "^7.24.5",
+		"@babel/preset-react": "^7.24.1",
+		"@babel/preset-typescript": "^7.24.1",
+		"@types/react": "^18.3.1",
+		"@types/react-test-renderer": "^18.3.0",
+		"mitt": "^3.0.1",
+		"react": "^18.3.1",
+		"react-test-renderer": "^18.3.1"
+	}
+}