diff --git a/examples/expo-example/src/app.tsx b/examples/expo-example/src/app.tsx
index b293975..d606b83 100644
--- a/examples/expo-example/src/app.tsx
+++ b/examples/expo-example/src/app.tsx
@@ -6,7 +6,7 @@
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";
import { registerRootComponent } from "expo";
-import { Stylable, useYoshiki } from "yoshiki/native";
+import { Stylable, useYoshiki } from "yoshiki";
const CustomBox = ({ color, ...props }: { color: string } & Stylable) => {
const { css } = useYoshiki();
diff --git a/examples/next-example/src/pages/_app.tsx b/examples/next-example/src/pages/_app.tsx
deleted file mode 100644
index 68e92d7..0000000
--- a/examples/next-example/src/pages/_app.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-//
-// Copyright (c) Zoe Roux and contributors. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for details.
-//
-
-import { StyleRegistryProvider } from "yoshiki";
-import type { AppProps } from "next/app";
-
-const App = ({ Component, pageProps }: AppProps) => {
- return (
-
-
-
- );
-};
-
-export default App;
diff --git a/examples/next-example/src/pages/_document.tsx b/examples/next-example/src/pages/_document.tsx
index 12566e7..e464e33 100644
--- a/examples/next-example/src/pages/_document.tsx
+++ b/examples/next-example/src/pages/_document.tsx
@@ -3,7 +3,7 @@
// Licensed under the MIT license. See LICENSE file in the project root for details.
//
-import { StyleRegistryProvider, createStyleRegistry, useStyleRegistry } from "yoshiki";
+import { StyleRegistryProvider, createStyleRegistry } from "yoshiki";
import Document, { DocumentContext } from "next/document";
Document.getInitialProps = async (ctx: DocumentContext) => {
diff --git a/packages/yoshiki/package.json b/packages/yoshiki/package.json
index 9e3e389..e3f1217 100644
--- a/packages/yoshiki/package.json
+++ b/packages/yoshiki/package.json
@@ -2,6 +2,7 @@
"name": "yoshiki",
"version": "1.0.0",
"main": "src/index.ts",
+ "react-native": "src/native/index.ts",
"types": "src/index.ts",
"exports": {
".": "./src/index.ts",
@@ -18,6 +19,7 @@
}
},
"devDependencies": {
+ "@types/node": "^18.11.9",
"@types/react": "^18.0.24",
"@types/react-native": "~0.69.1",
"react": "^18.2.0",
diff --git a/packages/yoshiki/src/index.ts b/packages/yoshiki/src/index.ts
index 7f65d46..97deaa7 100644
--- a/packages/yoshiki/src/index.ts
+++ b/packages/yoshiki/src/index.ts
@@ -3,8 +3,8 @@
// Licensed under the MIT license. See LICENSE file in the project root for details.
//
+console.log("Web version")
export { type Theme, breakpoints, useTheme } from "./theme";
-export { type YoshikiRegistry } from "./type";
export {
useYoshiki,
diff --git a/packages/yoshiki/src/native/generator.tsx b/packages/yoshiki/src/native/generator.tsx
index 8b7c5bd..fffab5a 100644
--- a/packages/yoshiki/src/native/generator.tsx
+++ b/packages/yoshiki/src/native/generator.tsx
@@ -4,9 +4,9 @@
//
import { ViewStyle, TextStyle, ImageStyle, useWindowDimensions } from "react-native";
-import { breakpoints, Theme, useTheme } from "~/theme";
-import { Breakpoints, YoshikiStyle } from "~/type";
-import { isBreakpoints } from "~/utils";
+import { breakpoints, Theme, useTheme } from "../theme";
+import { Breakpoints, YoshikiStyle } from "../type";
+import { isBreakpoints } from "../utils";
// TODO: shorhands
type EnhancedStyle = {
diff --git a/packages/yoshiki/src/native/index.ts b/packages/yoshiki/src/native/index.ts
index 5f7e1cd..3866b86 100644
--- a/packages/yoshiki/src/native/index.ts
+++ b/packages/yoshiki/src/native/index.ts
@@ -3,9 +3,7 @@
// Licensed under the MIT license. See LICENSE file in the project root for details.
//
+console.log("native version")
export { type Theme, breakpoints, useTheme } from "../theme";
-export { type YoshikiRegistry } from "../type";
export { useYoshiki, type Stylable, type CssObject } from "./generator";
-
-export { useStyleRegistry, StyleRegistryProvider, createStyleRegistry } from "./noop-registry";
diff --git a/packages/yoshiki/src/native/noop-registry.tsx b/packages/yoshiki/src/native/noop-registry.tsx
deleted file mode 100644
index 2f3ace2..0000000
--- a/packages/yoshiki/src/native/noop-registry.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-//
-// Copyright (c) Zoe Roux and contributors. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for details.
-//
-
-import { ReactNode } from "react";
-import { YoshikiRegistry } from "~/type";
-
-class NoopRegistry implements YoshikiRegistry {
- flush(): string[] {
- return [];
- }
-}
-
-export const StyleRegistryProvider = ({
- registry,
- children,
-}: {
- registry?: YoshikiRegistry;
- children: ReactNode;
-}) => {
- return children;
-};
-
-export const createStyleRegistry = () => new NoopRegistry();
-export const useStyleRegistry = createStyleRegistry;
-
diff --git a/packages/yoshiki/src/react/generator.ts b/packages/yoshiki/src/react/generator.tsx
similarity index 94%
rename from packages/yoshiki/src/react/generator.ts
rename to packages/yoshiki/src/react/generator.tsx
index db0a867..520d299 100644
--- a/packages/yoshiki/src/react/generator.ts
+++ b/packages/yoshiki/src/react/generator.tsx
@@ -3,9 +3,9 @@
// Licensed under the MIT license. See LICENSE file in the project root for details.
//
-import { useTheme } from "~/theme";
-import { Theme, YoshikiStyle, breakpoints } from "~/type";
-import { isBreakpoints } from "~/utils";
+import { Theme, breakpoints, useTheme } from "../theme";
+import { YoshikiStyle } from "../type";
+import { isBreakpoints } from "../utils";
import { CSSProperties, useInsertionEffect } from "react";
import { useStyleRegistry } from "./registry";
import type { CssObject } from ".";
diff --git a/packages/yoshiki/src/react/index.tsx b/packages/yoshiki/src/react/index.tsx
index 328d2bb..fcbf8f5 100644
--- a/packages/yoshiki/src/react/index.tsx
+++ b/packages/yoshiki/src/react/index.tsx
@@ -5,7 +5,7 @@
import { Properties } from "csstype";
import { CSSProperties } from "react";
-import { YoshikiStyle } from "~/type";
+import { YoshikiStyle } from "../type";
export type CssObject = {
[key in keyof Properties]: YoshikiStyle;
diff --git a/packages/yoshiki/src/react/registry.tsx b/packages/yoshiki/src/react/registry.tsx
index d4f74da..3803029 100644
--- a/packages/yoshiki/src/react/registry.tsx
+++ b/packages/yoshiki/src/react/registry.tsx
@@ -4,9 +4,8 @@
//
import React, { createContext, ReactNode, useContext } from "react";
-import { YoshikiRegistry } from "~/type";
-class StyleRegistry implements YoshikiRegistry {
+class StyleRegistry {
private completed: string[] = [];
private rules: [string, string][] = [];
private styleElement: HTMLStyleElement | null = null;
@@ -32,7 +31,6 @@ class StyleRegistry implements YoshikiRegistry {
flush(): string[] {
const ret = this.rules.filter(([key]) => !this.completed.includes(key));
- console.log(ret);
this.rules = [];
this.completed.push(...ret.map(([key]) => key));
return ret.map(([, value]) => value);
@@ -75,21 +73,17 @@ class StyleRegistry implements YoshikiRegistry {
}
}
-const RegistryContext = createContext(null);
+const defaultRegistry = typeof window !== "undefined" ? new StyleRegistry() : null;
+const RegistryContext = createContext(defaultRegistry);
export const StyleRegistryProvider = ({
registry,
children,
}: {
- registry?: StyleRegistry;
+ registry: StyleRegistry;
children: ReactNode;
}) => {
- if (!registry && typeof window === "undefined") return children;
- return (
-
- {children}
-
- );
+ return {children};
};
export const useStyleRegistry = () => useContext(RegistryContext) || new StyleRegistry(true);
diff --git a/packages/yoshiki/src/type.ts b/packages/yoshiki/src/type.ts
index fda320c..249e7e4 100644
--- a/packages/yoshiki/src/type.ts
+++ b/packages/yoshiki/src/type.ts
@@ -14,11 +14,3 @@ export type YoshikiStyle =
export type Breakpoints = {
[key in keyof (typeof breakpoints)]?: Property;
};
-
-export interface YoshikiRegistry {
- /**
- * Retrieve all newly created styles not yet flushed.
- * @returns An array of css classes declarations.
- */
- flush(): string[];
-}
diff --git a/packages/yoshiki/src/utils.ts b/packages/yoshiki/src/utils.ts
index 46bde8c..6c3d3da 100644
--- a/packages/yoshiki/src/utils.ts
+++ b/packages/yoshiki/src/utils.ts
@@ -3,7 +3,8 @@
// Licensed under the MIT license. See LICENSE file in the project root for details.
//
-import { Breakpoints, breakpoints } from "./type";
+import { breakpoints } from "./theme";
+import { Breakpoints } from "./type";
export const isBreakpoints = (value: unknown): value is Breakpoints => {
if (typeof value !== "object" || !value) return false;
diff --git a/packages/yoshiki/tsconfig.json b/packages/yoshiki/tsconfig.json
index fbe09c6..7900211 100755
--- a/packages/yoshiki/tsconfig.json
+++ b/packages/yoshiki/tsconfig.json
@@ -16,10 +16,7 @@
"isolatedModules": true,
"jsx": "react-native",
"incremental": true,
- "baseUrl": ".",
- "paths": {
- "~/*": ["src/*"]
- }
+ "rootDir": "src/"
},
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
diff --git a/yarn.lock b/yarn.lock
index e68135e..5b31d83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2658,7 +2658,7 @@ __metadata:
languageName: node
linkType: hard
-"@types/node@npm:*, @types/node@npm:18.11.9":
+"@types/node@npm:*, @types/node@npm:18.11.9, @types/node@npm:^18.11.9":
version: 18.11.9
resolution: "@types/node@npm:18.11.9"
checksum: cc0aae109e9b7adefc32eecb838d6fad931663bb06484b5e9cbbbf74865c721b03d16fd8d74ad90e31dbe093d956a7c2c306ba5429ba0c00f3f7505103d7a496
@@ -16063,6 +16063,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "yoshiki@workspace:packages/yoshiki"
dependencies:
+ "@types/node": ^18.11.9
"@types/react": ^18.0.24
"@types/react-native": ~0.69.1
react: ^18.2.0