@tamagui/static 1.0.0-alpha.5 → 1.0.0-alpha.6
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/dist/extractor/createExtractor.js +40 -26
- package/dist/extractor/createExtractor.js.map +2 -2
- package/dist/extractor/extractToClassNames.js +8 -16
- package/dist/extractor/extractToClassNames.js.map +2 -2
- package/dist/index.cjs +68 -46
- package/dist/index.cjs.map +2 -2
- package/dist/patchReactNativeWeb.js +18 -3
- package/dist/patchReactNativeWeb.js.map +2 -2
- package/package.json +4 -4
- package/src/extractor/createExtractor.ts +50 -34
- package/src/extractor/extractToClassNames.ts +4 -15
- package/src/patchReactNativeWeb.ts +21 -5
- package/src/types.ts +5 -2
- package/types.d.ts +7 -2
|
@@ -4,8 +4,24 @@ import * as fs from "fs";
|
|
|
4
4
|
import path from "path";
|
|
5
5
|
function patchReactNativeWeb() {
|
|
6
6
|
const rootDir = require.resolve("react-native-web").replace(/\/dist.*/, "");
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
const modulePath = path.join(rootDir, "dist", "tamagui-exports.js");
|
|
8
|
+
const cjsPath = path.join(rootDir, "dist", "cjs", "tamagui-exports.js");
|
|
9
|
+
const isEqual = (() => {
|
|
10
|
+
let res = false;
|
|
11
|
+
try {
|
|
12
|
+
res = fs.readFileSync(modulePath, "utf-8") === moduleExports && fs.readFileSync(cjsPath, "utf-8") == cjsExports;
|
|
13
|
+
} catch {
|
|
14
|
+
res = false;
|
|
15
|
+
}
|
|
16
|
+
return res;
|
|
17
|
+
})();
|
|
18
|
+
if (!isEqual) {
|
|
19
|
+
console.log("\u{1F95A} Tamagui patching react-native-web to share atomic styling primitives");
|
|
20
|
+
console.log(" > adding", modulePath);
|
|
21
|
+
console.log(" > adding", cjsPath);
|
|
22
|
+
fs.writeFileSync(modulePath, moduleExports);
|
|
23
|
+
fs.writeFileSync(cjsPath, cjsExports);
|
|
24
|
+
}
|
|
9
25
|
const moduleEntry = path.join(rootDir, "dist", "index.js");
|
|
10
26
|
const moduleEntrySrc = fs.readFileSync(moduleEntry, "utf-8");
|
|
11
27
|
if (!moduleEntrySrc.includes("// tamagui-patch-v4")) {
|
|
@@ -26,7 +42,6 @@ export const TamaguiExports = TExports
|
|
|
26
42
|
exports.TamaguiExports = _interopRequireDefault(require("./tamagui-exports"));
|
|
27
43
|
// tamagui-patch-end
|
|
28
44
|
`);
|
|
29
|
-
console.log(`Tamagui patched react-native-web`);
|
|
30
45
|
}
|
|
31
46
|
}
|
|
32
47
|
__name(patchReactNativeWeb, "patchReactNativeWeb");
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/patchReactNativeWeb.ts"],
|
|
4
|
-
"sourcesContent": ["import * as fs from 'fs'\nimport path from 'path'\n\n// were patching react-native-web so we can use some internal methods\n// we do it this way because we need to rely on webpack or bundler config to determine cjs vs esm\n// so we can't just require it all directly\n// would be nice in the future to be able to eject from react-native-web entirely optionally\n\n// keep it sync\nexport function patchReactNativeWeb() {\n const rootDir = require.resolve('react-native-web').replace(/\\/dist.*/, '')\n
|
|
5
|
-
"mappings": ";;AAAA;AACA;AAQO,+BAA+B;AACpC,QAAM,UAAU,AAAgB,oCAAoB,QAAQ,YAAY;
|
|
4
|
+
"sourcesContent": ["import * as fs from 'fs'\nimport path from 'path'\n\n// were patching react-native-web so we can use some internal methods\n// we do it this way because we need to rely on webpack or bundler config to determine cjs vs esm\n// so we can't just require it all directly\n// would be nice in the future to be able to eject from react-native-web entirely optionally\n\n// keep it sync\nexport function patchReactNativeWeb() {\n const rootDir = require.resolve('react-native-web').replace(/\\/dist.*/, '')\n const modulePath = path.join(rootDir, 'dist', 'tamagui-exports.js')\n const cjsPath = path.join(rootDir, 'dist', 'cjs', 'tamagui-exports.js')\n\n const isEqual = (() => {\n let res = false\n try {\n res =\n fs.readFileSync(modulePath, 'utf-8') === moduleExports &&\n fs.readFileSync(cjsPath, 'utf-8') == cjsExports\n } catch {\n res = false\n }\n return res\n })()\n\n if (!isEqual) {\n console.log('\uD83E\uDD5A Tamagui patching react-native-web to share atomic styling primitives')\n console.log(' > adding', modulePath)\n console.log(' > adding', cjsPath)\n fs.writeFileSync(modulePath, moduleExports)\n fs.writeFileSync(cjsPath, cjsExports)\n }\n\n // if entry files not patched, patch them:\n const moduleEntry = path.join(rootDir, 'dist', 'index.js')\n const moduleEntrySrc = fs.readFileSync(moduleEntry, 'utf-8')\n if (!moduleEntrySrc.includes('// tamagui-patch-v4')) {\n fs.writeFileSync(\n moduleEntry,\n `${removePatch(moduleEntrySrc)}\n\n// tamagui-patch-v4\nimport * as TExports from './tamagui-exports'\nexport const TamaguiExports = TExports\n// tamagui-patch-end\n`\n )\n }\n const cjsEntry = path.join(rootDir, 'dist', 'cjs', 'index.js')\n const cjsEntrySrc = fs.readFileSync(cjsEntry, 'utf-8')\n if (!cjsEntrySrc.includes('// tamagui-patch-v4')) {\n fs.writeFileSync(\n cjsEntry,\n `${removePatch(cjsEntrySrc)}\n\n// tamagui-patch-v4\nexports.TamaguiExports = _interopRequireDefault(require(\"./tamagui-exports\"));\n// tamagui-patch-end\n`\n )\n }\n}\n\nfunction removePatch(source: string) {\n return source.replace(/\\/\\/ tamagui-patch([.\\s\\S]*)/g, '')\n}\n\n// view exports/View.ts\nconst forwardedPropsObj = `{\n ...fwdProps.defaultProps,\n ...fwdProps.accessibilityProps,\n ...fwdProps.clickProps,\n ...fwdProps.focusProps,\n ...fwdProps.keyboardProps,\n ...fwdProps.mouseProps,\n ...fwdProps.touchProps,\n ...fwdProps.styleProps,\n href: true,\n lang: true,\n onScroll: true,\n onWheel: true,\n pointerEvents: true\n}\n`\n\nconst moduleExports = `\nexport { atomic } from './exports/StyleSheet/compile'\nexport { default as createCompileableStyle } from './exports/StyleSheet/createCompileableStyle'\nexport { default as createReactDOMStyle } from './exports/StyleSheet/createReactDOMStyle'\nexport { default as i18Style } from './exports/StyleSheet/i18nStyle'\nexport { default as createDOMProps } from './modules/createDOMProps'\nexport { default as AccessibilityUtil } from './modules/AccessibilityUtil'\nexport { default as createElement } from './exports/createElement'\nexport { default as css } from './exports/StyleSheet/css'\nexport { default as TextAncestorContext } from './exports/Text/TextAncestorContext'\nexport { default as pick } from './modules/pick'\nexport { default as useElementLayout } from './modules/useElementLayout'\nexport { default as useMergeRefs } from './modules/useMergeRefs'\nexport { default as usePlatformMethods } from './modules/usePlatformMethods'\nexport { default as useResponderEvents } from './modules/useResponderEvents'\nimport * as fwdProps from './modules/forwardedProps'\nexport const forwardedProps = ${forwardedPropsObj}\n`\n\nconst cjsExports = `\nexports.atomic = require('./exports/StyleSheet/compile').atomic\nexports.createCompileableStyle = require('./exports/StyleSheet/createCompileableStyle')\nexports.createReactDOMStyle = require('./exports/StyleSheet/createReactDOMStyle')\nexports.i18Style = require('./exports/StyleSheet/i18nStyle')\nexports.createDOMProps = require('./modules/createDOMProps')\nexports.AccessibilityUtil = require('./modules/AccessibilityUtil')\nexports.createElement = require('./exports/createElement')\nexports.css = require('./exports/StyleSheet/css')\nexports.TextAncestorContext = require('./exports/Text/TextAncestorContext')\nexports.pick = require('./modules/pick')\nexports.useElementLayout = require('./modules/useElementLayout')\nexports.useMergeRefs = require('./modules/useMergeRefs')\nexports.usePlatformMethods = require('./modules/usePlatformMethods')\nexports.useResponderEvents = require('./modules/useResponderEvents')\nconst fwdProps = require('./modules/forwardedProps')\nexports.forwardedProps = ${forwardedPropsObj}\n`\n"],
|
|
5
|
+
"mappings": ";;AAAA;AACA;AAQO,+BAA+B;AACpC,QAAM,UAAU,AAAgB,oCAAoB,QAAQ,YAAY;AACxE,QAAM,aAAa,KAAK,KAAK,SAAS,QAAQ;AAC9C,QAAM,UAAU,KAAK,KAAK,SAAS,QAAQ,OAAO;AAElD,QAAM,UAAW,OAAM;AACrB,QAAI,MAAM;AACV,QAAI;AACF,YACE,GAAG,aAAa,YAAY,aAAa,iBACzC,GAAG,aAAa,SAAS,YAAY;AAAA,YACvC;AACA,YAAM;AAAA;AAER,WAAO;AAAA;AAGT,MAAI,CAAC,SAAS;AACZ,YAAQ,IAAI;AACZ,YAAQ,IAAI,eAAe;AAC3B,YAAQ,IAAI,eAAe;AAC3B,OAAG,cAAc,YAAY;AAC7B,OAAG,cAAc,SAAS;AAAA;AAI5B,QAAM,cAAc,KAAK,KAAK,SAAS,QAAQ;AAC/C,QAAM,iBAAiB,GAAG,aAAa,aAAa;AACpD,MAAI,CAAC,eAAe,SAAS,wBAAwB;AACnD,OAAG,cACD,aACA,GAAG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnB,QAAM,WAAW,KAAK,KAAK,SAAS,QAAQ,OAAO;AACnD,QAAM,cAAc,GAAG,aAAa,UAAU;AAC9C,MAAI,CAAC,YAAY,SAAS,wBAAwB;AAChD,OAAG,cACD,UACA,GAAG,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA7CL;AAuDhB,qBAAqB,QAAgB;AACnC,SAAO,OAAO,QAAQ,iCAAiC;AAAA;AADhD;AAKT,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB1B,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAgBU;AAAA;AAGhC,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAgBQ;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/static",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.6",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@dish/babel-preset": "^0.0.6",
|
|
54
54
|
"@expo/match-media": "^0.1.0",
|
|
55
55
|
"@tamagui/build": "^1.0.0-alpha.2",
|
|
56
|
-
"@tamagui/core": "^1.0.0-alpha.
|
|
56
|
+
"@tamagui/core": "^1.0.0-alpha.6",
|
|
57
57
|
"@tamagui/core-node": "^1.0.0-alpha.5",
|
|
58
58
|
"@tamagui/fake-react-native": "^1.0.0-alpha.2",
|
|
59
59
|
"@tamagui/helpers": "^1.0.0-alpha.5",
|
|
@@ -64,10 +64,10 @@
|
|
|
64
64
|
"fs-extra": "^9.0.0",
|
|
65
65
|
"invariant": "^2.2.4",
|
|
66
66
|
"lodash": "^4.17.20",
|
|
67
|
-
"tamagui": "^1.0.0-alpha.
|
|
67
|
+
"tamagui": "^1.0.0-alpha.6"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
70
|
"react-native-web": "*"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "18a942d7a08109c8f5b8692a2adb20c69d56a7e1"
|
|
73
73
|
}
|
|
@@ -51,6 +51,7 @@ export function createExtractor() {
|
|
|
51
51
|
})
|
|
52
52
|
|
|
53
53
|
let loadedTamaguiConfig: TamaguiInternalConfig
|
|
54
|
+
let hasLogged = false
|
|
54
55
|
|
|
55
56
|
return {
|
|
56
57
|
getTamaguiConfig() {
|
|
@@ -66,7 +67,8 @@ export function createExtractor() {
|
|
|
66
67
|
sourcePath = '',
|
|
67
68
|
onExtractTag,
|
|
68
69
|
getFlattenedNode,
|
|
69
|
-
|
|
70
|
+
disableExtraction,
|
|
71
|
+
disableDebugAttr,
|
|
70
72
|
...props
|
|
71
73
|
}: ExtractorParseProps
|
|
72
74
|
) => {
|
|
@@ -87,12 +89,6 @@ export function createExtractor() {
|
|
|
87
89
|
loadedTamaguiConfig = tamaguiConfig
|
|
88
90
|
|
|
89
91
|
const defaultTheme = tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]]
|
|
90
|
-
|
|
91
|
-
// TODO this can be passed in / set based on if source changed
|
|
92
|
-
// const shouldReCheckTheme = false //Date.now() - hasParsedFileLast > 600
|
|
93
|
-
// hasParsedFileLast = Date.now()
|
|
94
|
-
|
|
95
|
-
let doesUseValidImport = false
|
|
96
92
|
const body = fileOrPath.type === 'Program' ? fileOrPath.get('body') : fileOrPath.program.body
|
|
97
93
|
|
|
98
94
|
/**
|
|
@@ -108,6 +104,8 @@ export function createExtractor() {
|
|
|
108
104
|
return obj
|
|
109
105
|
}, {})
|
|
110
106
|
|
|
107
|
+
let doesUseValidImport = false
|
|
108
|
+
|
|
111
109
|
for (const bodyPath of body) {
|
|
112
110
|
if (bodyPath.type !== 'ImportDeclaration') continue
|
|
113
111
|
const node = ('node' in bodyPath ? bodyPath.node : bodyPath) as any
|
|
@@ -148,6 +146,12 @@ export function createExtractor() {
|
|
|
148
146
|
*/
|
|
149
147
|
let programPath: NodePath<t.Program>
|
|
150
148
|
|
|
149
|
+
const res = {
|
|
150
|
+
flattened: 0,
|
|
151
|
+
optimized: 0,
|
|
152
|
+
modified: 0,
|
|
153
|
+
}
|
|
154
|
+
|
|
151
155
|
callTraverse({
|
|
152
156
|
Program: {
|
|
153
157
|
enter(path) {
|
|
@@ -186,8 +190,41 @@ export function createExtractor() {
|
|
|
186
190
|
return
|
|
187
191
|
}
|
|
188
192
|
|
|
189
|
-
const { staticConfig } = component
|
|
190
193
|
const originalNodeName = node.name.name
|
|
194
|
+
|
|
195
|
+
if (shouldPrintDebug) {
|
|
196
|
+
console.log(`\n<${originalNodeName} />`)
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
const filePath = sourcePath.replace(process.cwd(), '.')
|
|
200
|
+
const lineNumbers = node.loc
|
|
201
|
+
? node.loc.start.line +
|
|
202
|
+
(node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : '')
|
|
203
|
+
: ''
|
|
204
|
+
|
|
205
|
+
// add data-is
|
|
206
|
+
if (shouldAddDebugProp && !disableDebugAttr) {
|
|
207
|
+
const preName = componentName ? `${componentName}:` : ''
|
|
208
|
+
res.modified++
|
|
209
|
+
node.attributes.unshift(
|
|
210
|
+
t.jsxAttribute(
|
|
211
|
+
t.jsxIdentifier('data-is'),
|
|
212
|
+
t.stringLiteral(
|
|
213
|
+
` ${preName}${node.name.name} ${filePath.replace('./', '')}:${lineNumbers} `
|
|
214
|
+
)
|
|
215
|
+
)
|
|
216
|
+
)
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
if (disableExtraction) {
|
|
220
|
+
if (!hasLogged) {
|
|
221
|
+
console.log('🥚 Tamagui disableExtraction set: no CSS or optimizations will be run')
|
|
222
|
+
hasLogged = true
|
|
223
|
+
}
|
|
224
|
+
return
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
const { staticConfig } = component
|
|
191
228
|
const isTextView = staticConfig.isText || false
|
|
192
229
|
const validStyles = staticConfig?.validStyles ?? {}
|
|
193
230
|
|
|
@@ -224,10 +261,6 @@ export function createExtractor() {
|
|
|
224
261
|
return res
|
|
225
262
|
}
|
|
226
263
|
|
|
227
|
-
if (shouldPrintDebug) {
|
|
228
|
-
console.log(`\n<${originalNodeName} />`)
|
|
229
|
-
}
|
|
230
|
-
|
|
231
264
|
// Generate scope object at this level
|
|
232
265
|
const staticNamespace = getStaticBindingsForScope(
|
|
233
266
|
traversePath.scope,
|
|
@@ -775,12 +808,6 @@ export function createExtractor() {
|
|
|
775
808
|
modifiedComponents.add(parentFn)
|
|
776
809
|
}
|
|
777
810
|
|
|
778
|
-
const filePath = sourcePath.replace(process.cwd(), '.')
|
|
779
|
-
const lineNumbers = node.loc
|
|
780
|
-
? node.loc.start.line +
|
|
781
|
-
(node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : '')
|
|
782
|
-
: ''
|
|
783
|
-
|
|
784
811
|
// combine ternaries
|
|
785
812
|
let ternaries: Ternary[] = []
|
|
786
813
|
attrs = attrs
|
|
@@ -1051,21 +1078,6 @@ export function createExtractor() {
|
|
|
1051
1078
|
console.log(' - attrs (after): ', attrs.map(attrStr).join(', '))
|
|
1052
1079
|
}
|
|
1053
1080
|
|
|
1054
|
-
// add data-is
|
|
1055
|
-
if (shouldAddDebugProp) {
|
|
1056
|
-
const preName = componentName ? `${componentName}:` : ''
|
|
1057
|
-
// unshift so spreads/nesting overwrite
|
|
1058
|
-
attrs.unshift({
|
|
1059
|
-
type: 'attr',
|
|
1060
|
-
value: t.jsxAttribute(
|
|
1061
|
-
t.jsxIdentifier('data-is'),
|
|
1062
|
-
t.stringLiteral(
|
|
1063
|
-
` ${preName}${node.name.name} ${filePath.replace('./', '')}:${lineNumbers} `
|
|
1064
|
-
)
|
|
1065
|
-
),
|
|
1066
|
-
})
|
|
1067
|
-
}
|
|
1068
|
-
|
|
1069
1081
|
if (shouldFlatten) {
|
|
1070
1082
|
// DO FLATTEN
|
|
1071
1083
|
if (shouldPrintDebug) {
|
|
@@ -1073,7 +1085,7 @@ export function createExtractor() {
|
|
|
1073
1085
|
}
|
|
1074
1086
|
isFlattened = true
|
|
1075
1087
|
node.name.name = flatNode
|
|
1076
|
-
|
|
1088
|
+
res.flattened++
|
|
1077
1089
|
if (closingElement) {
|
|
1078
1090
|
closingElement.name.name = flatNode
|
|
1079
1091
|
}
|
|
@@ -1085,6 +1097,8 @@ export function createExtractor() {
|
|
|
1085
1097
|
console.log(' - attrs (end): ', attrs.map(attrStr).join(', '))
|
|
1086
1098
|
}
|
|
1087
1099
|
|
|
1100
|
+
res.optimized++
|
|
1101
|
+
|
|
1088
1102
|
onExtractTag({
|
|
1089
1103
|
attrs,
|
|
1090
1104
|
node,
|
|
@@ -1111,6 +1125,8 @@ export function createExtractor() {
|
|
|
1111
1125
|
removeUnusedHooks(comp, shouldPrintDebug)
|
|
1112
1126
|
}
|
|
1113
1127
|
}
|
|
1128
|
+
|
|
1129
|
+
return res
|
|
1114
1130
|
},
|
|
1115
1131
|
}
|
|
1116
1132
|
}
|
|
@@ -79,17 +79,11 @@ export function extractToClassNames({
|
|
|
79
79
|
const cssMap = new Map<string, { css: string; commentTexts: string[] }>()
|
|
80
80
|
const existingHoists: { [key: string]: t.Identifier } = {}
|
|
81
81
|
|
|
82
|
-
|
|
83
|
-
let optimized = 0
|
|
84
|
-
|
|
85
|
-
extractor.parse(ast, {
|
|
82
|
+
const res = extractor.parse(ast, {
|
|
86
83
|
sourcePath,
|
|
87
84
|
shouldPrintDebug,
|
|
88
85
|
...options,
|
|
89
86
|
getFlattenedNode: ({ tag }) => tag,
|
|
90
|
-
onDidFlatten() {
|
|
91
|
-
flattened++
|
|
92
|
-
},
|
|
93
87
|
onExtractTag: ({
|
|
94
88
|
attrs,
|
|
95
89
|
node,
|
|
@@ -100,8 +94,6 @@ export function extractToClassNames({
|
|
|
100
94
|
lineNumbers,
|
|
101
95
|
programPath,
|
|
102
96
|
}) => {
|
|
103
|
-
optimized++
|
|
104
|
-
|
|
105
97
|
let finalClassNames: ClassNameObject[] = []
|
|
106
98
|
let finalAttrs: (t.JSXAttribute | t.JSXSpreadAttribute)[] = []
|
|
107
99
|
let finalStyles: StyleObject[] = []
|
|
@@ -276,15 +268,12 @@ export function extractToClassNames({
|
|
|
276
268
|
},
|
|
277
269
|
})
|
|
278
270
|
|
|
279
|
-
if (!
|
|
271
|
+
if (!res || !res.modified) {
|
|
280
272
|
return null
|
|
281
273
|
}
|
|
282
274
|
|
|
283
275
|
const styles = Array.from(cssMap.values())
|
|
284
|
-
.map((x) =>
|
|
285
|
-
// remove comments
|
|
286
|
-
return x.css //shouldInternalDedupe ? x.css : `${x.commentTexts.join('\n')}\n${x.css}`
|
|
287
|
-
})
|
|
276
|
+
.map((x) => x.css)
|
|
288
277
|
.join('\n')
|
|
289
278
|
.trim()
|
|
290
279
|
|
|
@@ -325,7 +314,7 @@ export function extractToClassNames({
|
|
|
325
314
|
const memUsed =
|
|
326
315
|
Math.round(((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204) * 10) / 10
|
|
327
316
|
// prettier-ignore
|
|
328
|
-
console.log(` 🥚 ${basename(sourcePath).padStart(40)} ${`${Date.now() - start}`.padStart(3)}ms ׁ· ${`${optimized}`.padStart(4)} optimized · ${flattened} flattened ${memUsed > 10 ? `used ${memUsed}MB` : ''}`)
|
|
317
|
+
console.log(` 🥚 ${basename(sourcePath).padStart(40)} ${`${Date.now() - start}`.padStart(3)}ms ׁ· ${`${res.optimized}`.padStart(4)} optimized · ${res.flattened} flattened ${memUsed > 10 ? `used ${memUsed}MB` : ''}`)
|
|
329
318
|
}
|
|
330
319
|
|
|
331
320
|
return {
|
|
@@ -9,10 +9,28 @@ import path from 'path'
|
|
|
9
9
|
// keep it sync
|
|
10
10
|
export function patchReactNativeWeb() {
|
|
11
11
|
const rootDir = require.resolve('react-native-web').replace(/\/dist.*/, '')
|
|
12
|
+
const modulePath = path.join(rootDir, 'dist', 'tamagui-exports.js')
|
|
13
|
+
const cjsPath = path.join(rootDir, 'dist', 'cjs', 'tamagui-exports.js')
|
|
12
14
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
const isEqual = (() => {
|
|
16
|
+
let res = false
|
|
17
|
+
try {
|
|
18
|
+
res =
|
|
19
|
+
fs.readFileSync(modulePath, 'utf-8') === moduleExports &&
|
|
20
|
+
fs.readFileSync(cjsPath, 'utf-8') == cjsExports
|
|
21
|
+
} catch {
|
|
22
|
+
res = false
|
|
23
|
+
}
|
|
24
|
+
return res
|
|
25
|
+
})()
|
|
26
|
+
|
|
27
|
+
if (!isEqual) {
|
|
28
|
+
console.log('🥚 Tamagui patching react-native-web to share atomic styling primitives')
|
|
29
|
+
console.log(' > adding', modulePath)
|
|
30
|
+
console.log(' > adding', cjsPath)
|
|
31
|
+
fs.writeFileSync(modulePath, moduleExports)
|
|
32
|
+
fs.writeFileSync(cjsPath, cjsExports)
|
|
33
|
+
}
|
|
16
34
|
|
|
17
35
|
// if entry files not patched, patch them:
|
|
18
36
|
const moduleEntry = path.join(rootDir, 'dist', 'index.js')
|
|
@@ -41,8 +59,6 @@ exports.TamaguiExports = _interopRequireDefault(require("./tamagui-exports"));
|
|
|
41
59
|
// tamagui-patch-end
|
|
42
60
|
`
|
|
43
61
|
)
|
|
44
|
-
|
|
45
|
-
console.log(`Tamagui patched react-native-web`)
|
|
46
62
|
}
|
|
47
63
|
}
|
|
48
64
|
|
package/src/types.ts
CHANGED
|
@@ -15,6 +15,7 @@ export interface TamaguiOptions {
|
|
|
15
15
|
evaluateVars?: boolean
|
|
16
16
|
importsWhitelist?: string[]
|
|
17
17
|
disableExtraction?: boolean
|
|
18
|
+
disableDebugAttr?: boolean
|
|
18
19
|
exclude?: RegExp
|
|
19
20
|
logTimings?: boolean
|
|
20
21
|
|
|
@@ -32,7 +33,10 @@ export type ExtractedAttrAttr = {
|
|
|
32
33
|
|
|
33
34
|
export type ExtractedAttrStyle = { type: 'style'; value: Object }
|
|
34
35
|
|
|
35
|
-
export type ExtractedAttr =
|
|
36
|
+
export type ExtractedAttr =
|
|
37
|
+
| ExtractedAttrAttr
|
|
38
|
+
| { type: 'ternary'; value: Ternary }
|
|
39
|
+
| ExtractedAttrStyle
|
|
36
40
|
|
|
37
41
|
export type ExtractTagProps = {
|
|
38
42
|
attrs: ExtractedAttr[]
|
|
@@ -51,7 +55,6 @@ export type ExtractorParseProps = TamaguiOptions & {
|
|
|
51
55
|
shouldPrintDebug?: boolean
|
|
52
56
|
onExtractTag: (props: ExtractTagProps) => void
|
|
53
57
|
getFlattenedNode: (props: { isTextView: boolean; tag: string }) => string
|
|
54
|
-
onDidFlatten?: () => void
|
|
55
58
|
}
|
|
56
59
|
|
|
57
60
|
export interface Ternary {
|
package/types.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export interface TamaguiOptions {
|
|
|
11
11
|
evaluateVars?: boolean;
|
|
12
12
|
importsWhitelist?: string[];
|
|
13
13
|
disableExtraction?: boolean;
|
|
14
|
+
disableDebugAttr?: boolean;
|
|
14
15
|
exclude?: RegExp;
|
|
15
16
|
logTimings?: boolean;
|
|
16
17
|
cssPath?: string;
|
|
@@ -49,7 +50,6 @@ export declare type ExtractorParseProps = TamaguiOptions & {
|
|
|
49
50
|
isTextView: boolean;
|
|
50
51
|
tag: string;
|
|
51
52
|
}) => string;
|
|
52
|
-
onDidFlatten?: () => void;
|
|
53
53
|
};
|
|
54
54
|
export interface Ternary {
|
|
55
55
|
test: t.Expression;
|
|
@@ -63,6 +63,7 @@ declare class Variable {
|
|
|
63
63
|
val: string | number;
|
|
64
64
|
variable: string | number;
|
|
65
65
|
constructor({ val, name }: VariableIn);
|
|
66
|
+
toString(): string | number;
|
|
66
67
|
}
|
|
67
68
|
export declare type VariableIn = {
|
|
68
69
|
val: string | number;
|
|
@@ -174,7 +175,11 @@ export declare function createExtractor(): {
|
|
|
174
175
|
[key: string]: string | number;
|
|
175
176
|
};
|
|
176
177
|
}>;
|
|
177
|
-
parse: (fileOrPath: NodePath<t.Program> | t.File, { config, importsWhitelist, evaluateVars, shouldPrintDebug, sourcePath, onExtractTag, getFlattenedNode,
|
|
178
|
+
parse: (fileOrPath: NodePath<t.Program> | t.File, { config, importsWhitelist, evaluateVars, shouldPrintDebug, sourcePath, onExtractTag, getFlattenedNode, disableExtraction, disableDebugAttr, ...props }: ExtractorParseProps) => {
|
|
179
|
+
flattened: number;
|
|
180
|
+
optimized: number;
|
|
181
|
+
modified: number;
|
|
182
|
+
} | null;
|
|
178
183
|
};
|
|
179
184
|
export declare function literalToAst(literal: any): t.Expression;
|
|
180
185
|
export declare const CSS_FILE_NAME = "__snack.css";
|