From 48666abc24d074eb63622b5965fb9201533c5d97 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Sat, 12 Nov 2022 01:56:12 +0900 Subject: [PATCH] Add react-native auto-selection (still need typescript types) --- examples/expo-example/src/app.tsx | 2 +- examples/next-example/src/pages/_app.tsx | 17 ------------ examples/next-example/src/pages/_document.tsx | 2 +- packages/yoshiki/package.json | 2 ++ packages/yoshiki/src/index.ts | 2 +- packages/yoshiki/src/native/generator.tsx | 6 ++--- packages/yoshiki/src/native/index.ts | 4 +-- packages/yoshiki/src/native/noop-registry.tsx | 27 ------------------- .../src/react/{generator.ts => generator.tsx} | 6 ++--- packages/yoshiki/src/react/index.tsx | 2 +- packages/yoshiki/src/react/registry.tsx | 16 ++++------- packages/yoshiki/src/type.ts | 8 ------ packages/yoshiki/src/utils.ts | 3 ++- packages/yoshiki/tsconfig.json | 5 +--- yarn.lock | 3 ++- 15 files changed, 23 insertions(+), 82 deletions(-) delete mode 100644 examples/next-example/src/pages/_app.tsx delete mode 100644 packages/yoshiki/src/native/noop-registry.tsx rename packages/yoshiki/src/react/{generator.ts => generator.tsx} (94%) 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