react-native-unistyles 3.0.0-rc.3 → 3.0.0-rc.4
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.
- package/README.md +2 -2
- package/cxx/core/UnistylesCommitHook.cpp +8 -1
- package/cxx/core/UnistylesMountHook.cpp +1 -3
- package/lib/commonjs/reanimated/index.js +13 -0
- package/lib/commonjs/reanimated/index.js.map +1 -0
- package/lib/commonjs/reanimated/useAnimatedTheme.js +22 -0
- package/lib/commonjs/reanimated/useAnimatedTheme.js.map +1 -0
- package/lib/commonjs/reanimated/useAnimatedTheme.native.js +24 -0
- package/lib/commonjs/reanimated/useAnimatedTheme.native.js.map +1 -0
- package/lib/commonjs/web/shadowRegistry.js +7 -1
- package/lib/commonjs/web/shadowRegistry.js.map +1 -1
- package/lib/commonjs/web/types.js +2 -0
- package/lib/commonjs/web/types.js.map +1 -1
- package/lib/commonjs/web/utils/unistyle.js +6 -1
- package/lib/commonjs/web/utils/unistyle.js.map +1 -1
- package/lib/commonjs/web-only/getWebProps.js +19 -0
- package/lib/commonjs/web-only/getWebProps.js.map +1 -0
- package/lib/commonjs/web-only/index.js +13 -0
- package/lib/commonjs/web-only/index.js.map +1 -0
- package/lib/module/reanimated/index.js +4 -0
- package/lib/module/reanimated/index.js.map +1 -0
- package/lib/module/reanimated/useAnimatedTheme.js +17 -0
- package/lib/module/reanimated/useAnimatedTheme.js.map +1 -0
- package/lib/module/reanimated/useAnimatedTheme.native.js +19 -0
- package/lib/module/reanimated/useAnimatedTheme.native.js.map +1 -0
- package/lib/module/web/shadowRegistry.js +8 -2
- package/lib/module/web/shadowRegistry.js.map +1 -1
- package/lib/module/web/types.js +1 -1
- package/lib/module/web/types.js.map +1 -1
- package/lib/module/web/utils/unistyle.js +4 -0
- package/lib/module/web/utils/unistyle.js.map +1 -1
- package/lib/module/web-only/getWebProps.js +14 -0
- package/lib/module/web-only/getWebProps.js.map +1 -0
- package/lib/module/web-only/index.js +4 -0
- package/lib/module/web-only/index.js.map +1 -0
- package/lib/typescript/src/reanimated/index.d.ts +2 -0
- package/lib/typescript/src/reanimated/index.d.ts.map +1 -0
- package/lib/typescript/src/reanimated/useAnimatedTheme.d.ts +4 -0
- package/lib/typescript/src/reanimated/useAnimatedTheme.d.ts.map +1 -0
- package/lib/typescript/src/reanimated/useAnimatedTheme.native.d.ts +4 -0
- package/lib/typescript/src/reanimated/useAnimatedTheme.native.d.ts.map +1 -0
- package/lib/typescript/src/web/shadowRegistry.d.ts +2 -2
- package/lib/typescript/src/web/shadowRegistry.d.ts.map +1 -1
- package/lib/typescript/src/web/types.d.ts +3 -0
- package/lib/typescript/src/web/types.d.ts.map +1 -1
- package/lib/typescript/src/web/utils/unistyle.d.ts +2 -0
- package/lib/typescript/src/web/utils/unistyle.d.ts.map +1 -1
- package/lib/typescript/src/web-only/getWebProps.d.ts +7 -0
- package/lib/typescript/src/web-only/getWebProps.d.ts.map +1 -0
- package/lib/typescript/src/web-only/index.d.ts +2 -0
- package/lib/typescript/src/web-only/index.d.ts.map +1 -0
- package/package.json +26 -3
- package/plugin/index.js +93 -94
- package/reanimated/package.json +6 -0
- package/src/reanimated/index.ts +1 -0
- package/src/reanimated/useAnimatedTheme.native.ts +21 -0
- package/src/reanimated/useAnimatedTheme.ts +19 -0
- package/src/web/shadowRegistry.ts +10 -3
- package/src/web/types.ts +9 -4
- package/src/web/utils/unistyle.ts +5 -0
- package/src/web-only/getWebProps.ts +18 -0
- package/src/web-only/index.ts +2 -0
- package/web-only/package.json +6 -0
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/web-only/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "react-native-unistyles",
|
3
|
-
"version": "3.0.0-rc.
|
3
|
+
"version": "3.0.0-rc.4",
|
4
4
|
"description": "Level up your React Native StyleSheet",
|
5
5
|
"scripts": {
|
6
6
|
"test": "NODE_ENV=babel-test jest ./plugin",
|
@@ -51,8 +51,22 @@
|
|
51
51
|
"types": "./lib/typescript/src/server/index.d.ts",
|
52
52
|
"import": "./lib/module/server/index.js",
|
53
53
|
"browser": "./lib/module/server/index.js",
|
54
|
-
"react-native": "./src/server.ts",
|
54
|
+
"react-native": "./src/server/index.ts",
|
55
55
|
"default": "./lib/commonjs/server/index.js"
|
56
|
+
},
|
57
|
+
"./web": {
|
58
|
+
"types": "./lib/typescript/src/web-only/index.d.ts",
|
59
|
+
"import": "./lib/module/web-only/index.js",
|
60
|
+
"browser": "./lib/module/web-only/index.js",
|
61
|
+
"react-native": "./src/web-only/index.ts",
|
62
|
+
"default": "./lib/commonjs/web-only/index.js"
|
63
|
+
},
|
64
|
+
"./reanimated": {
|
65
|
+
"types": "./lib/typescript/src/reanimated/index.d.ts",
|
66
|
+
"import": "./lib/module/reanimated/index.js",
|
67
|
+
"browser": "./lib/module/reanimated/index.js",
|
68
|
+
"react-native": "./src/reanimated/index.ts",
|
69
|
+
"default": "./lib/commonjs/reanimated/index.js"
|
56
70
|
}
|
57
71
|
},
|
58
72
|
"files": [
|
@@ -66,6 +80,8 @@
|
|
66
80
|
"web",
|
67
81
|
"components",
|
68
82
|
"server",
|
83
|
+
"web-only",
|
84
|
+
"reanimated",
|
69
85
|
"react-native.config.js",
|
70
86
|
"Unistyles.podspec",
|
71
87
|
"!plugin/__tests__",
|
@@ -124,6 +140,7 @@
|
|
124
140
|
"react-native": "0.77.1",
|
125
141
|
"react-native-builder-bob": "0.37.0",
|
126
142
|
"react-native-nitro-modules": "0.25.2",
|
143
|
+
"react-native-reanimated": "3.17.5",
|
127
144
|
"react-native-web": "0.19.13",
|
128
145
|
"react-test-renderer": "18.3.1",
|
129
146
|
"release-it": "17.11.0",
|
@@ -134,7 +151,13 @@
|
|
134
151
|
"react": "*",
|
135
152
|
"react-native": ">=0.76.0",
|
136
153
|
"react-native-edge-to-edge": "*",
|
137
|
-
"react-native-nitro-modules": "*"
|
154
|
+
"react-native-nitro-modules": "*",
|
155
|
+
"react-native-reanimated": "*"
|
156
|
+
},
|
157
|
+
"peerDependenciesMeta": {
|
158
|
+
"react-native-reanimated": {
|
159
|
+
"optional": true
|
160
|
+
}
|
138
161
|
},
|
139
162
|
"workspaces": [
|
140
163
|
"example",
|
package/plugin/index.js
CHANGED
@@ -83,21 +83,10 @@ var NATIVE_COMPONENTS_PATHS = {
|
|
83
83
|
|
84
84
|
// plugin/src/exotic.ts
|
85
85
|
var t = __toESM(require("@babel/types"));
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
return pathString;
|
91
|
-
};
|
92
|
-
var toPlatformPath = (pathString) => {
|
93
|
-
return isWindows ? toWinPath(pathString) : pathString;
|
94
|
-
};
|
95
|
-
|
96
|
-
// plugin/src/exotic.ts
|
97
|
-
function handleExoticImport(path, state, exoticImport) {
|
98
|
-
const specifiers = path.node.specifiers;
|
99
|
-
const source = path.node.source;
|
100
|
-
if (path.node.importKind !== "value") {
|
86
|
+
function handleExoticImport(path2, state, exoticImport) {
|
87
|
+
const specifiers = path2.node.specifiers;
|
88
|
+
const source = path2.node.source;
|
89
|
+
if (path2.node.importKind !== "value") {
|
101
90
|
return;
|
102
91
|
}
|
103
92
|
specifiers.forEach((specifier) => {
|
@@ -112,22 +101,22 @@ function handleExoticImport(path, state, exoticImport) {
|
|
112
101
|
const newImport = t.importDeclaration(
|
113
102
|
[t.importDefaultSpecifier(t.identifier(specifier.local.name))],
|
114
103
|
t.stringLiteral(
|
115
|
-
state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(
|
104
|
+
state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/components/native/${rule.mapTo}`) ?? "" : `react-native-unistyles/components/native/${rule.mapTo}`
|
116
105
|
)
|
117
106
|
);
|
118
|
-
|
107
|
+
path2.replaceWith(newImport);
|
119
108
|
} else {
|
120
109
|
const newImport = t.importDeclaration(
|
121
110
|
[t.importSpecifier(t.identifier(rule.mapTo), t.identifier(rule.mapTo))],
|
122
111
|
t.stringLiteral(
|
123
|
-
state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(
|
112
|
+
state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/components/native/${rule.mapTo}`) ?? "" : `react-native-unistyles/components/native/${rule.mapTo}`
|
124
113
|
)
|
125
114
|
);
|
126
|
-
|
127
|
-
if (
|
128
|
-
|
115
|
+
path2.node.specifiers = specifiers.filter((s) => s !== specifier);
|
116
|
+
if (path2.node.specifiers.length === 0) {
|
117
|
+
path2.replaceWith(newImport);
|
129
118
|
} else {
|
130
|
-
|
119
|
+
path2.insertBefore(newImport);
|
131
120
|
}
|
132
121
|
}
|
133
122
|
return;
|
@@ -137,12 +126,12 @@ function handleExoticImport(path, state, exoticImport) {
|
|
137
126
|
|
138
127
|
// plugin/src/import.ts
|
139
128
|
var t2 = __toESM(require("@babel/types"));
|
140
|
-
function addUnistylesImport(
|
129
|
+
function addUnistylesImport(path2, state) {
|
141
130
|
const localNames = Object.keys(state.reactNativeImports);
|
142
131
|
const names = Object.values(state.reactNativeImports);
|
143
132
|
const pairs = Object.entries(state.reactNativeImports);
|
144
133
|
const nodesToRemove = [];
|
145
|
-
|
134
|
+
path2.node.body.forEach((node) => {
|
146
135
|
if (t2.isImportDeclaration(node) && node.source.value === "react-native") {
|
147
136
|
node.specifiers = node.specifiers.filter((specifier) => !localNames.some((name) => name === specifier.local.name));
|
148
137
|
if (node.specifiers.length === 0) {
|
@@ -151,7 +140,7 @@ function addUnistylesImport(path, state) {
|
|
151
140
|
}
|
152
141
|
});
|
153
142
|
names.forEach((name) => {
|
154
|
-
const rnWebImport =
|
143
|
+
const rnWebImport = path2.node.body.find((node) => t2.isImportDeclaration(node) && node.source.value === `react-native-web/dist/exports/${name}`);
|
155
144
|
if (rnWebImport) {
|
156
145
|
rnWebImport.specifiers = [];
|
157
146
|
}
|
@@ -160,34 +149,44 @@ function addUnistylesImport(path, state) {
|
|
160
149
|
const newImport = t2.importDeclaration(
|
161
150
|
[t2.importSpecifier(t2.identifier(localName), t2.identifier(name))],
|
162
151
|
t2.stringLiteral(
|
163
|
-
state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(
|
152
|
+
state.opts.isLocal ? state.file.opts.filename?.split("react-native-unistyles").at(0)?.concat(`react-native-unistyles/src/components/native/${name}`) ?? "" : `react-native-unistyles/components/native/${name}`
|
164
153
|
)
|
165
154
|
);
|
166
|
-
|
155
|
+
path2.node.body.unshift(newImport);
|
167
156
|
});
|
168
|
-
nodesToRemove.forEach((node) =>
|
157
|
+
nodesToRemove.forEach((node) => path2.node.body.splice(path2.node.body.indexOf(node), 1));
|
169
158
|
}
|
170
159
|
function isInsideNodeModules(state) {
|
171
160
|
return state.file.opts.filename?.includes("node_modules") && !state.file.replaceWithUnistyles;
|
172
161
|
}
|
173
|
-
function addUnistylesRequire(
|
162
|
+
function addUnistylesRequire(path2, state) {
|
174
163
|
Object.entries(state.reactNativeImports).forEach(([componentName, uniqueName]) => {
|
175
164
|
const newRequire = t2.variableDeclaration("const", [
|
176
165
|
t2.variableDeclarator(
|
177
166
|
t2.identifier(uniqueName),
|
178
167
|
t2.callExpression(t2.identifier("require"), [
|
179
|
-
t2.stringLiteral(
|
168
|
+
t2.stringLiteral(`react-native-unistyles/src/components/native/${componentName}`)
|
180
169
|
])
|
181
170
|
)
|
182
171
|
]);
|
183
|
-
|
172
|
+
path2.node.body.unshift(newRequire);
|
184
173
|
});
|
185
174
|
}
|
186
175
|
|
176
|
+
// plugin/src/paths.ts
|
177
|
+
var import_node_path = __toESM(require("node:path"));
|
178
|
+
var isWindows = process.platform === "win32";
|
179
|
+
var toWinPath = (pathString) => {
|
180
|
+
return import_node_path.default.normalize(pathString).replace(/\//g, "\\");
|
181
|
+
};
|
182
|
+
var toPlatformPath = (pathString) => {
|
183
|
+
return isWindows ? toWinPath(pathString) : pathString;
|
184
|
+
};
|
185
|
+
|
187
186
|
// plugin/src/ref.ts
|
188
187
|
var t3 = __toESM(require("@babel/types"));
|
189
|
-
function hasStringRef(
|
190
|
-
return
|
188
|
+
function hasStringRef(path2) {
|
189
|
+
return path2.node.openingElement.attributes.find(
|
191
190
|
(attr) => t3.isJSXAttribute(attr) && t3.isJSXIdentifier(attr.name, { name: "ref" }) && t3.isStringLiteral(attr.value)
|
192
191
|
);
|
193
192
|
}
|
@@ -324,8 +323,8 @@ function stringToUniqueId(str) {
|
|
324
323
|
const absHash = Math.abs(hash);
|
325
324
|
return absHash % 1e9;
|
326
325
|
}
|
327
|
-
function isUnistylesStyleSheet(
|
328
|
-
const { callee } =
|
326
|
+
function isUnistylesStyleSheet(path2, state) {
|
327
|
+
const { callee } = path2.node;
|
329
328
|
if (!t4.isMemberExpression(callee) || !t4.isIdentifier(callee.property)) {
|
330
329
|
return false;
|
331
330
|
}
|
@@ -333,38 +332,38 @@ function isUnistylesStyleSheet(path, state) {
|
|
333
332
|
const isRequire = state.file.hasUnistylesImport && callee.property.name === "create" && t4.isMemberExpression(callee.object) && t4.isIdentifier(callee.object.property) && t4.isIdentifier(callee.object.object) && callee.object.object.name === state.file.styleSheetLocalName && callee.object.property.name === "StyleSheet";
|
334
333
|
return isImport || isRequire;
|
335
334
|
}
|
336
|
-
function isUnistylesCommonJSRequire(
|
337
|
-
const isRequire = t4.isIdentifier(
|
338
|
-
if (isRequire && t4.isVariableDeclarator(
|
335
|
+
function isUnistylesCommonJSRequire(path2, state) {
|
336
|
+
const isRequire = t4.isIdentifier(path2.node.callee) && path2.node.arguments.length > 0 && t4.isStringLiteral(path2.node.arguments[0]) && path2.node.arguments[0].value === "react-native-unistyles";
|
337
|
+
if (isRequire && t4.isVariableDeclarator(path2.parent) && t4.isIdentifier(path2.parent.id)) {
|
339
338
|
state.file.hasUnistylesImport = true;
|
340
|
-
state.file.styleSheetLocalName =
|
339
|
+
state.file.styleSheetLocalName = path2.parent.id.name;
|
341
340
|
}
|
342
341
|
return isRequire;
|
343
342
|
}
|
344
|
-
function isReactNativeCommonJSRequire(
|
345
|
-
const isRequire = t4.isIdentifier(
|
346
|
-
const requireImportName =
|
343
|
+
function isReactNativeCommonJSRequire(path2, state) {
|
344
|
+
const isRequire = t4.isIdentifier(path2.node.callee) && path2.node.arguments.length > 0 && path2.node.callee.name === "require";
|
345
|
+
const requireImportName = path2.node.arguments.find((node) => t4.isStringLiteral(node));
|
347
346
|
const isReactNativeRequire = isRequire && requireImportName && (requireImportName.value === "react-native" || requireImportName.value === "react-native-web/dist/index");
|
348
|
-
if (isReactNativeRequire && t4.isVariableDeclarator(
|
349
|
-
state.file.reactNativeCommonJSName =
|
347
|
+
if (isReactNativeRequire && t4.isVariableDeclarator(path2.parent) && t4.isIdentifier(path2.parent.id)) {
|
348
|
+
state.file.reactNativeCommonJSName = path2.parent.id.name;
|
350
349
|
}
|
351
350
|
return isRequire;
|
352
351
|
}
|
353
|
-
function isKindOfStyleSheet(
|
352
|
+
function isKindOfStyleSheet(path2, state) {
|
354
353
|
if (!state.file.forceProcessing && !state.file.hasUnistylesImport) {
|
355
354
|
return false;
|
356
355
|
}
|
357
|
-
const { callee } =
|
356
|
+
const { callee } = path2.node;
|
358
357
|
return t4.isMemberExpression(callee) && t4.isIdentifier(callee.property) && callee.property.name === "create" && t4.isIdentifier(callee.object);
|
359
358
|
}
|
360
|
-
function addStyleSheetTag(
|
359
|
+
function addStyleSheetTag(path2, state) {
|
361
360
|
const str = state.filename?.replace(state.cwd, "") ?? "";
|
362
361
|
const uniqueId = stringToUniqueId(str) + ++state.file.tagNumber;
|
363
|
-
|
362
|
+
path2.node.arguments.push(t4.numericLiteral(uniqueId));
|
364
363
|
}
|
365
|
-
function getStylesDependenciesFromObject(
|
364
|
+
function getStylesDependenciesFromObject(path2) {
|
366
365
|
const detectedStylesWithVariants = /* @__PURE__ */ new Set();
|
367
|
-
const stylesheet =
|
366
|
+
const stylesheet = path2.node.arguments[0];
|
368
367
|
if (t4.isObjectExpression(stylesheet)) {
|
369
368
|
stylesheet?.properties.forEach((property) => {
|
370
369
|
if (!t4.isObjectProperty(property) || !t4.isIdentifier(property.key)) {
|
@@ -663,8 +662,8 @@ function addDependencies(state, styleName, unistyle, detectedDependencies) {
|
|
663
662
|
|
664
663
|
// plugin/src/variants.ts
|
665
664
|
var t5 = __toESM(require("@babel/types"));
|
666
|
-
function extractVariants(
|
667
|
-
const maybeVariants =
|
665
|
+
function extractVariants(path2, state) {
|
666
|
+
const maybeVariants = path2.node.body.filter((node2) => t5.isExpressionStatement(node2) && t5.isCallExpression(node2.expression) && t5.isMemberExpression(node2.expression.callee));
|
668
667
|
if (maybeVariants.length === 0) {
|
669
668
|
return;
|
670
669
|
}
|
@@ -687,7 +686,7 @@ function extractVariants(path, state) {
|
|
687
686
|
return;
|
688
687
|
}
|
689
688
|
const calleeName = callee.object.name;
|
690
|
-
const newUniqueName =
|
689
|
+
const newUniqueName = path2.scope.generateUidIdentifier(calleeName);
|
691
690
|
const shadowDeclaration = t5.variableDeclaration("const", [
|
692
691
|
t5.variableDeclarator(newUniqueName, t5.identifier(calleeName))
|
693
692
|
]);
|
@@ -698,14 +697,14 @@ function extractVariants(path, state) {
|
|
698
697
|
const finalDeclaration = t5.variableDeclaration("const", [
|
699
698
|
t5.variableDeclarator(t5.identifier(calleeName), newCallExpression)
|
700
699
|
]);
|
701
|
-
const pathIndex =
|
702
|
-
const rest =
|
700
|
+
const pathIndex = path2.node.body.findIndex((bodyPath) => bodyPath === targetVariant);
|
701
|
+
const rest = path2.node.body.slice(pathIndex + 1);
|
703
702
|
const statement = t5.blockStatement([
|
704
703
|
finalDeclaration,
|
705
704
|
...rest
|
706
705
|
]);
|
707
|
-
|
708
|
-
...
|
706
|
+
path2.node.body = [
|
707
|
+
...path2.node.body.slice(0, pathIndex),
|
709
708
|
shadowDeclaration,
|
710
709
|
statement
|
711
710
|
];
|
@@ -724,8 +723,8 @@ function index_default() {
|
|
724
723
|
name: "babel-react-native-unistyles",
|
725
724
|
visitor: {
|
726
725
|
Program: {
|
727
|
-
enter(
|
728
|
-
state.file.replaceWithUnistyles = REPLACE_WITH_UNISTYLES_PATHS.map(toPlatformPath).concat(state.opts.autoProcessPaths ?? []).some((
|
726
|
+
enter(path2, state) {
|
727
|
+
state.file.replaceWithUnistyles = REPLACE_WITH_UNISTYLES_PATHS.map(toPlatformPath).concat(state.opts.autoProcessPaths ?? []).some((path3) => state.filename?.includes(path3));
|
729
728
|
state.file.hasAnyUnistyle = false;
|
730
729
|
state.file.hasUnistylesImport = false;
|
731
730
|
state.file.addUnistylesRequire = false;
|
@@ -735,7 +734,7 @@ function index_default() {
|
|
735
734
|
state.file.tagNumber = 0;
|
736
735
|
state.reactNativeImports = {};
|
737
736
|
state.file.forceProcessing = state.opts.autoProcessRoot && state.filename ? state.filename.includes(toPlatformPath(`${state.file.opts.root}/${state.opts.autoProcessRoot}/`)) : false;
|
738
|
-
|
737
|
+
path2.traverse({
|
739
738
|
BlockStatement(blockPath) {
|
740
739
|
if (isInsideNodeModules(state)) {
|
741
740
|
return;
|
@@ -744,41 +743,41 @@ function index_default() {
|
|
744
743
|
}
|
745
744
|
});
|
746
745
|
},
|
747
|
-
exit(
|
746
|
+
exit(path2, state) {
|
748
747
|
if (isInsideNodeModules(state)) {
|
749
748
|
return;
|
750
749
|
}
|
751
750
|
if (state.file.addUnistylesRequire) {
|
752
|
-
return addUnistylesRequire(
|
751
|
+
return addUnistylesRequire(path2, state);
|
753
752
|
}
|
754
753
|
if (state.file.hasAnyUnistyle || state.file.hasVariants || state.file.replaceWithUnistyles || state.file.forceProcessing) {
|
755
|
-
addUnistylesImport(
|
754
|
+
addUnistylesImport(path2, state);
|
756
755
|
}
|
757
756
|
}
|
758
757
|
},
|
759
|
-
FunctionDeclaration(
|
758
|
+
FunctionDeclaration(path2, state) {
|
760
759
|
if (isInsideNodeModules(state)) {
|
761
760
|
return;
|
762
761
|
}
|
763
|
-
const componentName =
|
762
|
+
const componentName = path2.node.id ? path2.node.id.name : null;
|
764
763
|
if (componentName) {
|
765
764
|
state.file.hasVariants = false;
|
766
765
|
}
|
767
766
|
},
|
768
|
-
ClassDeclaration(
|
767
|
+
ClassDeclaration(path2, state) {
|
769
768
|
if (isInsideNodeModules(state)) {
|
770
769
|
return;
|
771
770
|
}
|
772
|
-
const componentName =
|
771
|
+
const componentName = path2.node.id ? path2.node.id.name : null;
|
773
772
|
if (componentName) {
|
774
773
|
state.file.hasVariants = false;
|
775
774
|
}
|
776
775
|
},
|
777
|
-
VariableDeclaration(
|
776
|
+
VariableDeclaration(path2, state) {
|
778
777
|
if (isInsideNodeModules(state)) {
|
779
778
|
return;
|
780
779
|
}
|
781
|
-
|
780
|
+
path2.node.declarations.forEach((declaration) => {
|
782
781
|
if (t6.isArrowFunctionExpression(declaration.init) || t6.isFunctionExpression(declaration.init)) {
|
783
782
|
const componentName = declaration.id && t6.isIdentifier(declaration.id) ? declaration.id.name : null;
|
784
783
|
if (componentName) {
|
@@ -787,83 +786,83 @@ function index_default() {
|
|
787
786
|
}
|
788
787
|
});
|
789
788
|
},
|
790
|
-
ImportDeclaration(
|
789
|
+
ImportDeclaration(path2, state) {
|
791
790
|
const exoticImport = REPLACE_WITH_UNISTYLES_EXOTIC_PATHS.concat(state.opts.autoRemapImports ?? []).find((exotic) => state.filename?.includes(exotic.path));
|
792
791
|
if (exoticImport) {
|
793
|
-
return handleExoticImport(
|
792
|
+
return handleExoticImport(path2, state, exoticImport);
|
794
793
|
}
|
795
794
|
if (isInsideNodeModules(state)) {
|
796
795
|
return;
|
797
796
|
}
|
798
|
-
const importSource =
|
797
|
+
const importSource = path2.node.source.value;
|
799
798
|
if (importSource.includes("react-native-unistyles")) {
|
800
799
|
state.file.hasUnistylesImport = true;
|
801
|
-
|
800
|
+
path2.node.specifiers.forEach((specifier) => {
|
802
801
|
if (t6.isImportSpecifier(specifier) && t6.isIdentifier(specifier.imported) && specifier.imported.name === "StyleSheet") {
|
803
802
|
state.file.styleSheetLocalName = specifier.local.name;
|
804
803
|
}
|
805
804
|
});
|
806
805
|
}
|
807
806
|
if (importSource === "react-native") {
|
808
|
-
|
807
|
+
path2.node.specifiers.forEach((specifier) => {
|
809
808
|
if (t6.isImportSpecifier(specifier) && t6.isIdentifier(specifier.imported) && REACT_NATIVE_COMPONENT_NAMES.includes(specifier.imported.name)) {
|
810
809
|
state.reactNativeImports[specifier.local.name] = specifier.imported.name;
|
811
810
|
}
|
812
811
|
});
|
813
812
|
}
|
814
|
-
if (importSource.includes(
|
815
|
-
handleExoticImport(
|
813
|
+
if (importSource.includes("react-native/Libraries")) {
|
814
|
+
handleExoticImport(path2, state, NATIVE_COMPONENTS_PATHS);
|
816
815
|
}
|
817
816
|
if (!state.file.forceProcessing && Array.isArray(state.opts.autoProcessImports)) {
|
818
817
|
state.file.forceProcessing = state.opts.autoProcessImports.includes(importSource);
|
819
818
|
}
|
820
819
|
},
|
821
|
-
JSXElement(
|
820
|
+
JSXElement(path2, state) {
|
822
821
|
if (isInsideNodeModules(state)) {
|
823
822
|
return;
|
824
823
|
}
|
825
|
-
if (hasStringRef(
|
824
|
+
if (hasStringRef(path2)) {
|
826
825
|
throw new Error("Detected string based ref which is not supported by Unistyles.");
|
827
826
|
}
|
828
827
|
},
|
829
|
-
MemberExpression(
|
828
|
+
MemberExpression(path2, state) {
|
830
829
|
if (isInsideNodeModules(state)) {
|
831
830
|
return;
|
832
831
|
}
|
833
|
-
if (!state.file.reactNativeCommonJSName || !t6.isIdentifier(
|
832
|
+
if (!state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.object)) {
|
834
833
|
return;
|
835
834
|
}
|
836
|
-
if (
|
835
|
+
if (path2.node.object.name !== state.file.reactNativeCommonJSName || !t6.isIdentifier(path2.node.property)) {
|
837
836
|
return;
|
838
837
|
}
|
839
|
-
if (!REACT_NATIVE_COMPONENT_NAMES.includes(
|
838
|
+
if (!REACT_NATIVE_COMPONENT_NAMES.includes(path2.node.property.name)) {
|
840
839
|
return;
|
841
840
|
}
|
842
|
-
if (!state.reactNativeImports[
|
843
|
-
const uniqueId =
|
844
|
-
state.reactNativeImports[
|
841
|
+
if (!state.reactNativeImports[path2.node.property.name]) {
|
842
|
+
const uniqueId = path2.scope.generateUidIdentifier(`reactNativeUnistyles_${path2.node.property.name}`);
|
843
|
+
state.reactNativeImports[path2.node.property.name] = uniqueId.name;
|
845
844
|
state.file.addUnistylesRequire = true;
|
846
845
|
}
|
847
|
-
|
846
|
+
path2.node.object.name = state.reactNativeImports[path2.node.property.name];
|
848
847
|
},
|
849
|
-
CallExpression(
|
848
|
+
CallExpression(path2, state) {
|
850
849
|
if (isInsideNodeModules(state)) {
|
851
850
|
return;
|
852
851
|
}
|
853
|
-
if (isUnistylesCommonJSRequire(
|
852
|
+
if (isUnistylesCommonJSRequire(path2, state)) {
|
854
853
|
return;
|
855
854
|
}
|
856
|
-
if (isReactNativeCommonJSRequire(
|
855
|
+
if (isReactNativeCommonJSRequire(path2, state)) {
|
857
856
|
return;
|
858
857
|
}
|
859
|
-
if (!isUnistylesStyleSheet(
|
858
|
+
if (!isUnistylesStyleSheet(path2, state) && !isKindOfStyleSheet(path2, state)) {
|
860
859
|
return;
|
861
860
|
}
|
862
861
|
state.file.hasAnyUnistyle = true;
|
863
|
-
addStyleSheetTag(
|
864
|
-
const arg = t6.isAssignmentExpression(
|
862
|
+
addStyleSheetTag(path2, state);
|
863
|
+
const arg = t6.isAssignmentExpression(path2.node.arguments[0]) ? path2.node.arguments[0].right : path2.node.arguments[0];
|
865
864
|
if (t6.isObjectExpression(arg)) {
|
866
|
-
const detectedDependencies = getStylesDependenciesFromObject(
|
865
|
+
const detectedDependencies = getStylesDependenciesFromObject(path2);
|
867
866
|
if (detectedDependencies) {
|
868
867
|
if (t6.isObjectExpression(arg)) {
|
869
868
|
arg.properties.forEach((property) => {
|
@@ -875,7 +874,7 @@ function index_default() {
|
|
875
874
|
}
|
876
875
|
}
|
877
876
|
if (t6.isArrowFunctionExpression(arg) || t6.isFunctionExpression(arg)) {
|
878
|
-
const funcPath = t6.isAssignmentExpression(
|
877
|
+
const funcPath = t6.isAssignmentExpression(path2.node.arguments[0]) ? path2.get("arguments.0.right") : path2.get("arguments.0");
|
879
878
|
const detectedDependencies = getStylesDependenciesFromFunction(funcPath);
|
880
879
|
if (detectedDependencies) {
|
881
880
|
const body = t6.isBlockStatement(arg.body) ? arg.body.body.find((statement) => t6.isReturnStatement(statement))?.argument : arg.body;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { useAnimatedTheme } from './useAnimatedTheme'
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import { useEffect } from 'react'
|
2
|
+
import { type SharedValue, useSharedValue } from 'react-native-reanimated'
|
3
|
+
import { StyleSheet, UnistyleDependency, UnistylesRuntime } from '../specs'
|
4
|
+
import type { UnistylesTheme } from '../types'
|
5
|
+
|
6
|
+
export const useAnimatedTheme = () => {
|
7
|
+
const theme = useSharedValue(UnistylesRuntime.getTheme())
|
8
|
+
|
9
|
+
useEffect(() => {
|
10
|
+
// @ts-ignore this is hidden from TS
|
11
|
+
const dispose = StyleSheet.addChangeListener(changedDependencies => {
|
12
|
+
if (changedDependencies.includes(UnistyleDependency.Theme)) {
|
13
|
+
theme.set(UnistylesRuntime.getTheme())
|
14
|
+
}
|
15
|
+
})
|
16
|
+
|
17
|
+
return () => dispose()
|
18
|
+
}, [])
|
19
|
+
|
20
|
+
return theme as SharedValue<UnistylesTheme>
|
21
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import { useEffect } from 'react'
|
2
|
+
import { type SharedValue, useSharedValue } from 'react-native-reanimated'
|
3
|
+
import { UnistyleDependency, UnistylesRuntime } from '../specs'
|
4
|
+
import type { UnistylesTheme } from '../types'
|
5
|
+
import { services } from '../web/services'
|
6
|
+
|
7
|
+
export const useAnimatedTheme = () => {
|
8
|
+
const theme = useSharedValue(UnistylesRuntime.getTheme())
|
9
|
+
|
10
|
+
useEffect(() => {
|
11
|
+
const dispose = services.listener.addListeners([UnistyleDependency.Theme], () => theme.set(UnistylesRuntime.getTheme()))
|
12
|
+
|
13
|
+
return () => {
|
14
|
+
dispose()
|
15
|
+
}
|
16
|
+
}, [])
|
17
|
+
|
18
|
+
return theme as SharedValue<UnistylesTheme>
|
19
|
+
}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import { UnistyleDependency } from '../specs/NativePlatform/NativePlatform.nitro'
|
2
2
|
import type { UnistylesTheme, UnistylesValues } from '../types'
|
3
3
|
import { deepMergeObjects } from '../utils'
|
4
|
-
import type { UnistylesServices } from './types'
|
5
|
-
import { extractSecrets, extractUnistyleDependencies } from './utils'
|
4
|
+
import type { UniGeneratedStyle, UnistylesServices } from './types'
|
5
|
+
import { extractSecrets, extractUnistyleDependencies, isGeneratedUnistyle, isServer } from './utils'
|
6
6
|
import { getVariants } from './variants'
|
7
7
|
|
8
8
|
export class UnistylesShadowRegistry {
|
@@ -28,6 +28,13 @@ export class UnistylesShadowRegistry {
|
|
28
28
|
}
|
29
29
|
|
30
30
|
addStyles = (unistyles: Array<UnistylesValues>, forChild?: boolean) => {
|
31
|
+
const [firstStyle] = unistyles
|
32
|
+
|
33
|
+
// If it is already a generated style, return it
|
34
|
+
if (firstStyle && isGeneratedUnistyle(firstStyle)) {
|
35
|
+
return firstStyle as UniGeneratedStyle
|
36
|
+
}
|
37
|
+
|
31
38
|
const getParsedStyles = () => {
|
32
39
|
const allStyles = unistyles.map(unistyle => {
|
33
40
|
const secrets = extractSecrets(unistyle)
|
@@ -97,7 +104,7 @@ export class UnistylesShadowRegistry {
|
|
97
104
|
getScopedTheme = () => this.scopedTheme
|
98
105
|
|
99
106
|
remove = (ref: any, hash?: string) => {
|
100
|
-
if (!(ref instanceof HTMLElement) || !hash) {
|
107
|
+
if (isServer() || !(ref instanceof HTMLElement) || !hash) {
|
101
108
|
return
|
102
109
|
}
|
103
110
|
|
package/src/web/types.ts
CHANGED
@@ -1,8 +1,8 @@
|
|
1
1
|
import type { UnistylesListener } from './listener'
|
2
|
-
import type{ UnistylesRegistry } from './registry'
|
3
|
-
import type{ UnistylesRuntime } from './runtime'
|
4
|
-
import type{ UnistylesShadowRegistry } from './shadowRegistry'
|
5
|
-
import type{ UnistylesState } from './state'
|
2
|
+
import type { UnistylesRegistry } from './registry'
|
3
|
+
import type { UnistylesRuntime } from './runtime'
|
4
|
+
import type { UnistylesShadowRegistry } from './shadowRegistry'
|
5
|
+
import type { UnistylesState } from './state'
|
6
6
|
|
7
7
|
export type UnistylesServices = {
|
8
8
|
runtime: UnistylesRuntime,
|
@@ -11,3 +11,8 @@ export type UnistylesServices = {
|
|
11
11
|
state: UnistylesState,
|
12
12
|
listener: UnistylesListener
|
13
13
|
}
|
14
|
+
|
15
|
+
export const UNI_GENERATED_KEYS = ['$$css', 'hash', 'injectedClassName'] as const
|
16
|
+
export type UniGeneratedKey = typeof UNI_GENERATED_KEYS[number]
|
17
|
+
|
18
|
+
export type UniGeneratedStyle = Record<UniGeneratedKey, string>
|
@@ -5,6 +5,7 @@ import { ColorScheme, Orientation } from '../../specs/types'
|
|
5
5
|
import type { StyleSheet, StyleSheetWithSuperPowers, UnistylesValues } from '../../types/stylesheet'
|
6
6
|
import { isUnistylesMq, parseMq } from '../../utils'
|
7
7
|
import * as unistyles from '../services'
|
8
|
+
import { UNI_GENERATED_KEYS, type UniGeneratedKey, type UniGeneratedStyle } from '../types'
|
8
9
|
import { keyInObject, reduceObject } from './common'
|
9
10
|
|
10
11
|
export const schemeToTheme = (scheme: ColorScheme) => {
|
@@ -139,3 +140,7 @@ export const checkForAnimated = (value: any): boolean => {
|
|
139
140
|
|
140
141
|
return false
|
141
142
|
}
|
143
|
+
|
144
|
+
export const isGeneratedUnistyle = (value: Record<string, any>): value is UniGeneratedStyle => {
|
145
|
+
return Object.keys(value).every(key => UNI_GENERATED_KEYS.includes(key as UniGeneratedKey))
|
146
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import type { StyleProp } from 'react-native'
|
2
|
+
import { getClassName } from '../core'
|
3
|
+
import type { RNStyle, UnistylesValues } from '../types'
|
4
|
+
import { createUnistylesRef } from '../web/utils/createUnistylesRef'
|
5
|
+
|
6
|
+
export const getWebProps = <T>(style: StyleProp<RNStyle>) => {
|
7
|
+
const styles = getClassName(style as UnistylesValues)
|
8
|
+
const ref = createUnistylesRef<T>(styles)
|
9
|
+
const [generatedStyles] = styles ?? []
|
10
|
+
|
11
|
+
return {
|
12
|
+
className: [
|
13
|
+
generatedStyles?.hash,
|
14
|
+
generatedStyles?.injectedClassName,
|
15
|
+
].filter(Boolean).join(' '),
|
16
|
+
ref
|
17
|
+
}
|
18
|
+
}
|