rn-studio 0.1.0 → 0.2.1
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 +14 -2
- package/dist/StudioProvider.d.ts +9 -1
- package/dist/StudioProvider.d.ts.map +1 -1
- package/dist/StudioProvider.js +20 -3
- package/dist/StudioProvider.js.map +1 -1
- package/dist/ast/AstEngine.d.ts +1 -4
- package/dist/ast/AstEngine.d.ts.map +1 -1
- package/dist/ast/AstEngine.js +165 -37
- package/dist/ast/AstEngine.js.map +1 -1
- package/dist/components/ComponentTree.d.ts.map +1 -1
- package/dist/components/ComponentTree.js +2 -2
- package/dist/components/ComponentTree.js.map +1 -1
- package/dist/components/FloatingBubble.js +1 -1
- package/dist/components/InspectorPanel.d.ts +3 -1
- package/dist/components/InspectorPanel.d.ts.map +1 -1
- package/dist/components/InspectorPanel.js +42 -101
- package/dist/components/InspectorPanel.js.map +1 -1
- package/dist/components/SelectionOverlay.d.ts +5 -7
- package/dist/components/SelectionOverlay.d.ts.map +1 -1
- package/dist/components/SelectionOverlay.js +215 -73
- package/dist/components/SelectionOverlay.js.map +1 -1
- package/dist/components/StyleEditor.d.ts.map +1 -1
- package/dist/components/StyleEditor.js +4 -4
- package/dist/components/StyleEditor.js.map +1 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -10,18 +10,30 @@
|
|
|
10
10
|
|
|
11
11
|
rn-studio adds a floating bubble to your app in DEV mode. Tap it, tap any component, and a panel appears showing all its styles and the internal component tree. Edit a value — the change is written directly to your source file and Metro Fast Refresh updates the UI instantly. Zero impact on production.
|
|
12
12
|
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
[](https://github.com/dgutierrezd/rn-studio/releases/download/v0.2.0/rn-studio-demo.mov)
|
|
16
|
+
|
|
17
|
+
> Tap the floating bubble → selection mode activates → tap any component → the inspector panel slides up with the component's styles, tree, and props. Edit a value, and the source file is rewritten via AST in real time while Metro Fast Refresh re-renders the UI.
|
|
18
|
+
>
|
|
19
|
+
> _Click the thumbnail to watch the full demo video (20 MB, iPhone 15 Pro capture)._
|
|
20
|
+
|
|
13
21
|
## Install
|
|
14
22
|
|
|
15
23
|
```bash
|
|
16
24
|
npm install rn-studio
|
|
17
25
|
```
|
|
18
26
|
|
|
19
|
-
|
|
27
|
+
Optional peer dependencies (already present in most RN apps — install only if missing):
|
|
20
28
|
|
|
21
29
|
```bash
|
|
22
|
-
npm install react-native-
|
|
30
|
+
npm install react-native-safe-area-context react-native-haptic-feedback
|
|
23
31
|
```
|
|
24
32
|
|
|
33
|
+
> `rn-studio@0.2+` drops the hard peer on `react-native-reanimated` and
|
|
34
|
+
> `react-native-gesture-handler`. The inspector panel uses the stock
|
|
35
|
+
> `Animated` API so consumers don't need the worklets babel plugin.
|
|
36
|
+
|
|
25
37
|
## Setup
|
|
26
38
|
|
|
27
39
|
### 1. Add the babel plugin
|
package/dist/StudioProvider.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { MutableRefObject } from 'react';
|
|
2
2
|
import type { BubblePosition, StudioConfig, StudioContextValue } from './types';
|
|
3
3
|
interface Props extends Partial<StudioConfig> {
|
|
4
4
|
enabled?: boolean;
|
|
@@ -7,6 +7,14 @@ interface Props extends Partial<StudioConfig> {
|
|
|
7
7
|
theme?: 'dark' | 'light';
|
|
8
8
|
children: React.ReactNode;
|
|
9
9
|
}
|
|
10
|
+
/**
|
|
11
|
+
* Shared mutable ref to the app root view. Populated by `<StudioProvider>`
|
|
12
|
+
* and consumed by `<SelectionOverlay>` for hit-testing via the React
|
|
13
|
+
* DevTools `getInspectorDataForViewAtPoint` API. Exposing it at module
|
|
14
|
+
* scope avoids having to thread it through context (and keeps the
|
|
15
|
+
* context value shape unchanged for consumers).
|
|
16
|
+
*/
|
|
17
|
+
export declare const appRootRef: MutableRefObject<any>;
|
|
10
18
|
/**
|
|
11
19
|
* <StudioProvider>
|
|
12
20
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StudioProvider.d.ts","sourceRoot":"","sources":["../src/StudioProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"StudioProvider.d.ts","sourceRoot":"","sources":["../src/StudioProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,gBAAgB,EAKjB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EACV,cAAc,EAEd,YAAY,EACZ,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AAEjB,UAAU,KAAM,SAAQ,OAAO,CAAC,YAAY,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,gBAAgB,CAAC,GAAG,CAAqB,CAAC;AAEnE;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAe,EACf,UAAiB,EACjB,cAA+B,GAChC,EAAE,KAAK,qBAUP;AAyFD,0EAA0E;AAC1E,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}
|
package/dist/StudioProvider.js
CHANGED
|
@@ -33,14 +33,24 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.appRootRef = void 0;
|
|
36
37
|
exports.StudioProvider = StudioProvider;
|
|
37
38
|
exports.useStudio = useStudio;
|
|
38
39
|
const react_1 = __importStar(require("react"));
|
|
40
|
+
const react_native_1 = require("react-native");
|
|
39
41
|
const StudioContext_1 = require("./context/StudioContext");
|
|
40
42
|
const WebSocketBridge_1 = require("./bridge/WebSocketBridge");
|
|
41
43
|
const FloatingBubble_1 = require("./components/FloatingBubble");
|
|
42
44
|
const SelectionOverlay_1 = require("./components/SelectionOverlay");
|
|
43
45
|
const InspectorPanel_1 = require("./components/InspectorPanel");
|
|
46
|
+
/**
|
|
47
|
+
* Shared mutable ref to the app root view. Populated by `<StudioProvider>`
|
|
48
|
+
* and consumed by `<SelectionOverlay>` for hit-testing via the React
|
|
49
|
+
* DevTools `getInspectorDataForViewAtPoint` API. Exposing it at module
|
|
50
|
+
* scope avoids having to thread it through context (and keeps the
|
|
51
|
+
* context value shape unchanged for consumers).
|
|
52
|
+
*/
|
|
53
|
+
exports.appRootRef = { current: null };
|
|
44
54
|
/**
|
|
45
55
|
* <StudioProvider>
|
|
46
56
|
*
|
|
@@ -69,8 +79,8 @@ const StudioProviderInner = ({ serverPort, bubblePosition, children }) => {
|
|
|
69
79
|
const bridge = bridgeRef.current;
|
|
70
80
|
bridge.connect();
|
|
71
81
|
const off = bridge.on('ACK', () => {
|
|
72
|
-
//
|
|
73
|
-
//
|
|
82
|
+
// Per-editor success feedback is handled via the debounce timers
|
|
83
|
+
// in StyleEditor rows.
|
|
74
84
|
});
|
|
75
85
|
return () => {
|
|
76
86
|
off();
|
|
@@ -114,8 +124,15 @@ const StudioProviderInner = ({ serverPort, bubblePosition, children }) => {
|
|
|
114
124
|
clearSelection,
|
|
115
125
|
updateStyle,
|
|
116
126
|
};
|
|
127
|
+
// Wrap children in a ref'd host View so the SelectionOverlay can
|
|
128
|
+
// hit-test against the user's UI via Fabric's inspector data API.
|
|
129
|
+
// `collapsable={false}` guarantees the View remains a real native
|
|
130
|
+
// node that can be targeted by `getInspectorDataForViewAtPoint`.
|
|
131
|
+
const setAppRootRef = (r) => {
|
|
132
|
+
exports.appRootRef.current = r;
|
|
133
|
+
};
|
|
117
134
|
return (react_1.default.createElement(StudioContext_1.StudioContext.Provider, { value: ctx },
|
|
118
|
-
children,
|
|
135
|
+
react_1.default.createElement(react_native_1.View, { ref: setAppRootRef, collapsable: false, style: { flex: 1 } }, children),
|
|
119
136
|
react_1.default.createElement(SelectionOverlay_1.SelectionOverlay, null),
|
|
120
137
|
react_1.default.createElement(InspectorPanel_1.InspectorPanel, null),
|
|
121
138
|
react_1.default.createElement(FloatingBubble_1.FloatingBubble, { position: bubblePosition })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StudioProvider.js","sourceRoot":"","sources":["../src/StudioProvider.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StudioProvider.js","sourceRoot":"","sources":["../src/StudioProvider.tsx"],"names":[],"mappings":"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"}
|
package/dist/ast/AstEngine.d.ts
CHANGED
|
@@ -7,10 +7,7 @@ export interface RewriteOptions {
|
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
9
9
|
* Rewrites (or inserts) a single style key on the JSX element that
|
|
10
|
-
* begins at the supplied (line, column).
|
|
11
|
-
*
|
|
12
|
-
* - Inline object literal: style={{ backgroundColor: 'red' }}
|
|
13
|
-
* - Array with inline obj: style={[base, { backgroundColor: 'red' }]}
|
|
10
|
+
* begins at the supplied (line, column) in the supplied file.
|
|
14
11
|
*/
|
|
15
12
|
export declare function rewriteStyle(opts: RewriteOptions): Promise<void>;
|
|
16
13
|
//# sourceMappingURL=AstEngine.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AstEngine.d.ts","sourceRoot":"","sources":["../../src/ast/AstEngine.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AstEngine.d.ts","sourceRoot":"","sources":["../../src/ast/AstEngine.ts"],"names":[],"mappings":"AAgCA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAgHD;;;GAGG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CAmJtE"}
|
package/dist/ast/AstEngine.js
CHANGED
|
@@ -37,46 +37,160 @@ exports.rewriteStyle = rewriteStyle;
|
|
|
37
37
|
/**
|
|
38
38
|
* AstEngine
|
|
39
39
|
*
|
|
40
|
-
* Server-side (Node.js) module that rewrites a JSX element's `style`
|
|
41
|
-
* in-place on disk, preserving formatting, comments, and
|
|
42
|
-
* thanks to recast.
|
|
40
|
+
* Server-side (Node.js) module that rewrites a JSX element's `style`
|
|
41
|
+
* prop in-place on disk, preserving formatting, comments, and
|
|
42
|
+
* surrounding code thanks to recast.
|
|
43
43
|
*
|
|
44
|
-
* Location resolution
|
|
45
|
-
* JSXOpeningElement — the same coordinates the babel plugin
|
|
46
|
-
* `__rnStudioSource`
|
|
44
|
+
* Location resolution uses the (line, column) coordinates of the
|
|
45
|
+
* JSXOpeningElement — the same coordinates the babel plugin and the
|
|
46
|
+
* default JSX dev transform embed into `__rnStudioSource` / `__source`
|
|
47
|
+
* at compile time.
|
|
48
|
+
*
|
|
49
|
+
* Handles five forms of the `style` prop:
|
|
50
|
+
*
|
|
51
|
+
* 1. No `style` at all → adds `style={{ [key]: value }}`
|
|
52
|
+
* 2. `style={{...}}` → upserts inline
|
|
53
|
+
* 3. `style={[a, {...}]}` → upserts into the first inline object,
|
|
54
|
+
* or appends a new override object
|
|
55
|
+
* 4. `style={styles.foo}` → resolves to the matching entry in
|
|
56
|
+
* `const styles = StyleSheet.create({...})`
|
|
57
|
+
* and upserts there
|
|
58
|
+
* 5. Anything else → wraps into an array with an inline
|
|
59
|
+
* override: `style={[expr, { [key]: value }]}`
|
|
60
|
+
*
|
|
61
|
+
* Library source files (anything under `node_modules` or
|
|
62
|
+
* `react-native/Libraries`) are refused — they're often Flow-typed
|
|
63
|
+
* and should never be rewritten by a userland tool anyway.
|
|
47
64
|
*/
|
|
48
65
|
const parser = __importStar(require("@babel/parser"));
|
|
49
66
|
const recast = __importStar(require("recast"));
|
|
50
67
|
const fs = __importStar(require("fs"));
|
|
68
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
51
69
|
const b = recast.types.builders;
|
|
52
70
|
function buildLiteral(value) {
|
|
53
71
|
if (typeof value === 'number')
|
|
54
72
|
return b.numericLiteral(value);
|
|
55
73
|
return b.stringLiteral(String(value));
|
|
56
74
|
}
|
|
75
|
+
function getPropertyKeyName(prop) {
|
|
76
|
+
if (!prop || !prop.key)
|
|
77
|
+
return null;
|
|
78
|
+
const k = prop.key;
|
|
79
|
+
if (k.type === 'Identifier')
|
|
80
|
+
return k.name;
|
|
81
|
+
if (k.type === 'StringLiteral')
|
|
82
|
+
return k.value;
|
|
83
|
+
if (k.type === 'Literal')
|
|
84
|
+
return k.value;
|
|
85
|
+
return null;
|
|
86
|
+
}
|
|
87
|
+
function upsertObjectProperty(objExpr, key, value) {
|
|
88
|
+
const props = objExpr.properties;
|
|
89
|
+
const existing = props.find((p) => {
|
|
90
|
+
if (!p || (p.type !== 'ObjectProperty' && p.type !== 'Property')) {
|
|
91
|
+
return false;
|
|
92
|
+
}
|
|
93
|
+
return getPropertyKeyName(p) === key;
|
|
94
|
+
});
|
|
95
|
+
const literal = buildLiteral(value);
|
|
96
|
+
if (existing) {
|
|
97
|
+
existing.value = literal;
|
|
98
|
+
}
|
|
99
|
+
else {
|
|
100
|
+
props.push(b.property('init', b.identifier(key), literal));
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Finds `const <objectName> = StyleSheet.create({...})` in the module
|
|
105
|
+
* body and returns the inner object expression for the entry named
|
|
106
|
+
* `propertyName` (creating it if missing). Returns null if the variable
|
|
107
|
+
* isn't declared via `StyleSheet.create(...)`.
|
|
108
|
+
*/
|
|
109
|
+
function findStyleSheetEntry(ast, objectName, propertyName) {
|
|
110
|
+
let targetObject = null;
|
|
111
|
+
recast.visit(ast, {
|
|
112
|
+
visitVariableDeclarator(path) {
|
|
113
|
+
const node = path.node;
|
|
114
|
+
if (!node.id ||
|
|
115
|
+
node.id.type !== 'Identifier' ||
|
|
116
|
+
node.id.name !== objectName) {
|
|
117
|
+
return this.traverse(path);
|
|
118
|
+
}
|
|
119
|
+
const init = node.init;
|
|
120
|
+
if (!init || init.type !== 'CallExpression')
|
|
121
|
+
return false;
|
|
122
|
+
const callee = init.callee;
|
|
123
|
+
const isStyleSheetCreate = (callee.type === 'MemberExpression' &&
|
|
124
|
+
callee.object &&
|
|
125
|
+
callee.object.name === 'StyleSheet' &&
|
|
126
|
+
callee.property &&
|
|
127
|
+
callee.property.name === 'create') ||
|
|
128
|
+
(callee.type === 'Identifier' && callee.name === 'create');
|
|
129
|
+
if (!isStyleSheetCreate)
|
|
130
|
+
return false;
|
|
131
|
+
const arg = init.arguments && init.arguments[0];
|
|
132
|
+
if (!arg || arg.type !== 'ObjectExpression')
|
|
133
|
+
return false;
|
|
134
|
+
let entry = arg.properties.find((p) => getPropertyKeyName(p) === propertyName);
|
|
135
|
+
if (!entry) {
|
|
136
|
+
entry = b.property('init', b.identifier(propertyName), b.objectExpression([]));
|
|
137
|
+
arg.properties.push(entry);
|
|
138
|
+
}
|
|
139
|
+
if (entry.value && entry.value.type === 'ObjectExpression') {
|
|
140
|
+
targetObject = entry.value;
|
|
141
|
+
}
|
|
142
|
+
return false;
|
|
143
|
+
},
|
|
144
|
+
});
|
|
145
|
+
return targetObject;
|
|
146
|
+
}
|
|
147
|
+
/**
|
|
148
|
+
* Wraps a non-array style expression into an array so we can append
|
|
149
|
+
* an inline override object. Mutates the JSXAttribute in place and
|
|
150
|
+
* returns the appended ObjectExpression for the caller to upsert into.
|
|
151
|
+
*/
|
|
152
|
+
function convertStyleToArrayOverride(styleAttr) {
|
|
153
|
+
const container = styleAttr.value;
|
|
154
|
+
if (!container || container.type !== 'JSXExpressionContainer')
|
|
155
|
+
return null;
|
|
156
|
+
const originalExpr = container.expression;
|
|
157
|
+
const override = b.objectExpression([]);
|
|
158
|
+
container.expression = b.arrayExpression([originalExpr, override]);
|
|
159
|
+
return override;
|
|
160
|
+
}
|
|
57
161
|
/**
|
|
58
162
|
* Rewrites (or inserts) a single style key on the JSX element that
|
|
59
|
-
* begins at the supplied (line, column).
|
|
60
|
-
*
|
|
61
|
-
* - Inline object literal: style={{ backgroundColor: 'red' }}
|
|
62
|
-
* - Array with inline obj: style={[base, { backgroundColor: 'red' }]}
|
|
163
|
+
* begins at the supplied (line, column) in the supplied file.
|
|
63
164
|
*/
|
|
64
165
|
async function rewriteStyle(opts) {
|
|
65
166
|
const { file, line, column, key, value } = opts;
|
|
66
167
|
if (!fs.existsSync(file)) {
|
|
67
168
|
throw new Error(`Source file not found: ${file}`);
|
|
68
169
|
}
|
|
170
|
+
if (file.indexOf('/node_modules/') !== -1 ||
|
|
171
|
+
file.indexOf('react-native/Libraries/') !== -1) {
|
|
172
|
+
throw new Error(`Refusing to rewrite library source file: ${file}`);
|
|
173
|
+
}
|
|
69
174
|
const source = fs.readFileSync(file, 'utf-8');
|
|
175
|
+
const isFlow = /@flow/.test(source.slice(0, 500));
|
|
176
|
+
const isTS = /\.tsx?$/.test(file);
|
|
177
|
+
const langPlugin = isFlow
|
|
178
|
+
? 'flow'
|
|
179
|
+
: isTS
|
|
180
|
+
? 'typescript'
|
|
181
|
+
: 'flow';
|
|
70
182
|
const ast = recast.parse(source, {
|
|
71
183
|
parser: {
|
|
72
184
|
parse: (src) => parser.parse(src, {
|
|
73
185
|
sourceType: 'module',
|
|
74
|
-
plugins: [
|
|
186
|
+
plugins: [langPlugin, 'jsx'],
|
|
75
187
|
tokens: true,
|
|
188
|
+
errorRecovery: true,
|
|
76
189
|
}),
|
|
77
190
|
},
|
|
78
191
|
});
|
|
79
192
|
let matched = false;
|
|
193
|
+
let mutated = false;
|
|
80
194
|
recast.visit(ast, {
|
|
81
195
|
visitJSXOpeningElement(path) {
|
|
82
196
|
const loc = path.node.loc && path.node.loc.start;
|
|
@@ -84,16 +198,16 @@ async function rewriteStyle(opts) {
|
|
|
84
198
|
return this.traverse(path);
|
|
85
199
|
}
|
|
86
200
|
matched = true;
|
|
87
|
-
// Locate the `style` prop.
|
|
88
201
|
const attributes = (path.node.attributes || []);
|
|
89
202
|
let styleAttr = attributes.find((a) => a.type === 'JSXAttribute' && a.name && a.name.name === 'style');
|
|
90
|
-
//
|
|
203
|
+
// Case A: no style prop yet — add an inline object.
|
|
91
204
|
if (!styleAttr) {
|
|
92
205
|
const obj = b.objectExpression([
|
|
93
206
|
b.property('init', b.identifier(key), buildLiteral(value)),
|
|
94
207
|
]);
|
|
95
208
|
styleAttr = b.jsxAttribute(b.jsxIdentifier('style'), b.jsxExpressionContainer(obj));
|
|
96
209
|
path.node.attributes.push(styleAttr);
|
|
210
|
+
mutated = true;
|
|
97
211
|
return false;
|
|
98
212
|
}
|
|
99
213
|
const expr = styleAttr.value &&
|
|
@@ -101,12 +215,14 @@ async function rewriteStyle(opts) {
|
|
|
101
215
|
styleAttr.value.expression;
|
|
102
216
|
if (!expr)
|
|
103
217
|
return false;
|
|
104
|
-
// Case
|
|
218
|
+
// Case B: inline object literal → upsert directly.
|
|
105
219
|
if (expr.type === 'ObjectExpression') {
|
|
106
220
|
upsertObjectProperty(expr, key, value);
|
|
221
|
+
mutated = true;
|
|
107
222
|
return false;
|
|
108
223
|
}
|
|
109
|
-
// Case
|
|
224
|
+
// Case C: array expression → upsert into first inline object,
|
|
225
|
+
// or push a new override object at the end.
|
|
110
226
|
if (expr.type === 'ArrayExpression') {
|
|
111
227
|
const firstObj = (expr.elements || []).find((el) => el && el.type === 'ObjectExpression');
|
|
112
228
|
if (firstObj) {
|
|
@@ -117,37 +233,49 @@ async function rewriteStyle(opts) {
|
|
|
117
233
|
b.property('init', b.identifier(key), buildLiteral(value)),
|
|
118
234
|
]));
|
|
119
235
|
}
|
|
236
|
+
mutated = true;
|
|
120
237
|
return false;
|
|
121
238
|
}
|
|
122
|
-
// Case
|
|
123
|
-
//
|
|
239
|
+
// Case D: MemberExpression like `styles.title` — try to resolve
|
|
240
|
+
// the StyleSheet.create definition and upsert in place.
|
|
241
|
+
if (expr.type === 'MemberExpression' &&
|
|
242
|
+
expr.object &&
|
|
243
|
+
expr.object.type === 'Identifier' &&
|
|
244
|
+
expr.property &&
|
|
245
|
+
expr.property.type === 'Identifier') {
|
|
246
|
+
const objectName = expr.object.name;
|
|
247
|
+
const propertyName = expr.property.name;
|
|
248
|
+
const entry = findStyleSheetEntry(ast, objectName, propertyName);
|
|
249
|
+
if (entry) {
|
|
250
|
+
upsertObjectProperty(entry, key, value);
|
|
251
|
+
mutated = true;
|
|
252
|
+
return false;
|
|
253
|
+
}
|
|
254
|
+
// Fallback: convert to [styles.title, { key: value }]
|
|
255
|
+
const override = convertStyleToArrayOverride(styleAttr);
|
|
256
|
+
if (override) {
|
|
257
|
+
upsertObjectProperty(override, key, value);
|
|
258
|
+
mutated = true;
|
|
259
|
+
}
|
|
260
|
+
return false;
|
|
261
|
+
}
|
|
262
|
+
// Case E: identifier, conditional, call, etc. — fall back to
|
|
263
|
+
// wrapping the expression in an array with an inline override.
|
|
264
|
+
const override = convertStyleToArrayOverride(styleAttr);
|
|
265
|
+
if (override) {
|
|
266
|
+
upsertObjectProperty(override, key, value);
|
|
267
|
+
mutated = true;
|
|
268
|
+
}
|
|
124
269
|
return false;
|
|
125
270
|
},
|
|
126
271
|
});
|
|
127
272
|
if (!matched) {
|
|
128
273
|
throw new Error(`Could not locate JSX element at ${file}:${line}:${column}`);
|
|
129
274
|
}
|
|
275
|
+
if (!mutated) {
|
|
276
|
+
throw new Error(`Matched JSX at ${file}:${line}:${column} but could not write style "${key}" — unsupported style expression form.`);
|
|
277
|
+
}
|
|
130
278
|
const output = recast.print(ast).code;
|
|
131
279
|
fs.writeFileSync(file, output, 'utf-8');
|
|
132
280
|
}
|
|
133
|
-
function upsertObjectProperty(objExpr, key, value) {
|
|
134
|
-
const props = objExpr.properties;
|
|
135
|
-
const existing = props.find((p) => {
|
|
136
|
-
if (!p || (p.type !== 'ObjectProperty' && p.type !== 'Property'))
|
|
137
|
-
return false;
|
|
138
|
-
const k = p.key;
|
|
139
|
-
if (!k)
|
|
140
|
-
return false;
|
|
141
|
-
return ((k.type === 'Identifier' && k.name === key) ||
|
|
142
|
-
(k.type === 'StringLiteral' && k.value === key) ||
|
|
143
|
-
(k.type === 'Literal' && k.value === key));
|
|
144
|
-
});
|
|
145
|
-
const literal = buildLiteral(value);
|
|
146
|
-
if (existing) {
|
|
147
|
-
existing.value = literal;
|
|
148
|
-
}
|
|
149
|
-
else {
|
|
150
|
-
props.push(b.property('init', b.identifier(key), literal));
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
281
|
//# sourceMappingURL=AstEngine.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AstEngine.js","sourceRoot":"","sources":["../../src/ast/AstEngine.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"AstEngine.js","sourceRoot":"","sources":["../../src/ast/AstEngine.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentTree.d.ts","sourceRoot":"","sources":["../../src/components/ComponentTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"ComponentTree.d.ts","sourceRoot":"","sources":["../../src/components/ComponentTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;;GAKG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAoBjC,CAAC"}
|
|
@@ -19,7 +19,7 @@ const ComponentTree = () => {
|
|
|
19
19
|
return (react_1.default.createElement(react_native_1.View, { style: styles.empty },
|
|
20
20
|
react_1.default.createElement(react_native_1.Text, { style: styles.emptyText }, "No component selected")));
|
|
21
21
|
}
|
|
22
|
-
return (react_1.default.createElement(react_native_1.ScrollView, { contentContainerStyle: styles.container },
|
|
22
|
+
return (react_1.default.createElement(react_native_1.ScrollView, { style: { flex: 1 }, contentContainerStyle: [styles.container, { paddingBottom: 40 }], showsVerticalScrollIndicator: true },
|
|
23
23
|
react_1.default.createElement(TreeNode, { node: selectedComponent, depth: 0 })));
|
|
24
24
|
};
|
|
25
25
|
exports.ComponentTree = ComponentTree;
|
|
@@ -48,7 +48,7 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
48
48
|
borderBottomColor: '#222',
|
|
49
49
|
},
|
|
50
50
|
name: {
|
|
51
|
-
color: '#
|
|
51
|
+
color: '#7C9BFF',
|
|
52
52
|
fontSize: 14,
|
|
53
53
|
fontWeight: '600',
|
|
54
54
|
fontFamily: 'Menlo',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentTree.js","sourceRoot":"","sources":["../../src/components/ComponentTree.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAAoF;AACpF,sDAA8C;AAG9C;;;;;GAKG;AACI,MAAM,aAAa,GAAa,GAAG,EAAE;IAC1C,MAAM,EAAE,iBAAiB,EAAE,GAAG,IAAA,0BAAS,GAAE,CAAC;IAE1C,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACvB,OAAO,CACL,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK;YACvB,8BAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,4BAA8B,CACtD,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BAAC,yBAAU,
|
|
1
|
+
{"version":3,"file":"ComponentTree.js","sourceRoot":"","sources":["../../src/components/ComponentTree.tsx"],"names":[],"mappings":"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"}
|
|
@@ -164,7 +164,7 @@ const FloatingBubble = ({ position = 'bottom-right' }) => {
|
|
|
164
164
|
{ translateY: pan.y },
|
|
165
165
|
{ scale },
|
|
166
166
|
],
|
|
167
|
-
backgroundColor: isActive ? '#
|
|
167
|
+
backgroundColor: isActive ? '#7C9BFF' : '#222',
|
|
168
168
|
},
|
|
169
169
|
] },
|
|
170
170
|
react_1.default.createElement(react_native_1.Text, { style: [styles.icon, { color: isActive ? '#111' : '#fff' }] }, isActive ? '✕' : '🎨')));
|
|
@@ -3,7 +3,9 @@ import React from 'react';
|
|
|
3
3
|
* InspectorPanel
|
|
4
4
|
*
|
|
5
5
|
* Bottom sheet shown when a component is selected. Three tabs:
|
|
6
|
-
* Styles | Tree | Props. Slides up with a spring animation
|
|
6
|
+
* Styles | Tree | Props. Slides up with a spring animation powered
|
|
7
|
+
* by the stock `Animated` API — no reanimated dependency, so there's
|
|
8
|
+
* no worklets babel plugin requirement on the consumer side.
|
|
7
9
|
*/
|
|
8
10
|
export declare const InspectorPanel: React.FC;
|
|
9
11
|
//# sourceMappingURL=InspectorPanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InspectorPanel.d.ts","sourceRoot":"","sources":["../../src/components/InspectorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"InspectorPanel.d.ts","sourceRoot":"","sources":["../../src/components/InspectorPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAmB3D;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAyClC,CAAC"}
|