@esportsplus/reactivity 0.22.1 → 0.23.0
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/.github/workflows/bump.yml +2 -2
- package/.github/workflows/dependabot.yml +1 -1
- package/.github/workflows/publish.yml +2 -2
- package/build/index.d.ts +1 -1
- package/build/index.js +1 -1
- package/build/reactive/array.d.ts +3 -0
- package/build/reactive/array.js +32 -2
- package/build/reactive/index.d.ts +17 -14
- package/build/reactive/index.js +7 -25
- package/build/system.js +1 -1
- package/build/transformer/core/detector.d.ts +2 -0
- package/build/transformer/core/detector.js +6 -0
- package/build/transformer/core/index.d.ts +10 -0
- package/build/transformer/core/index.js +55 -0
- package/build/transformer/core/transforms/auto-dispose.d.ts +3 -0
- package/build/transformer/core/transforms/auto-dispose.js +116 -0
- package/build/transformer/core/transforms/reactive-array.d.ts +4 -0
- package/build/transformer/core/transforms/reactive-array.js +89 -0
- package/build/transformer/core/transforms/reactive-object.d.ts +4 -0
- package/build/transformer/core/transforms/reactive-object.js +155 -0
- package/build/transformer/core/transforms/reactive-primitives.d.ts +4 -0
- package/build/transformer/core/transforms/reactive-primitives.js +325 -0
- package/build/transformer/core/transforms/utilities.d.ts +9 -0
- package/build/transformer/core/transforms/utilities.js +57 -0
- package/build/transformer/plugins/esbuild.d.ts +5 -0
- package/build/transformer/plugins/esbuild.js +30 -0
- package/build/transformer/plugins/tsc.d.ts +3 -0
- package/build/transformer/plugins/tsc.js +4 -0
- package/build/transformer/plugins/vite.d.ts +5 -0
- package/build/transformer/plugins/vite.js +28 -0
- package/build/types.d.ts +14 -4
- package/package.json +34 -3
- package/readme.md +276 -2
- package/src/constants.ts +1 -1
- package/src/index.ts +1 -1
- package/src/reactive/array.ts +49 -2
- package/src/reactive/index.ts +33 -57
- package/src/system.ts +14 -5
- package/src/transformer/core/detector.ts +12 -0
- package/src/transformer/core/index.ts +82 -0
- package/src/transformer/core/transforms/auto-dispose.ts +194 -0
- package/src/transformer/core/transforms/reactive-array.ts +140 -0
- package/src/transformer/core/transforms/reactive-object.ts +244 -0
- package/src/transformer/core/transforms/reactive-primitives.ts +459 -0
- package/src/transformer/core/transforms/utilities.ts +95 -0
- package/src/transformer/plugins/esbuild.ts +46 -0
- package/src/transformer/plugins/tsc.ts +8 -0
- package/src/transformer/plugins/vite.ts +41 -0
- package/src/types.ts +24 -5
- package/test/arrays.ts +146 -0
- package/test/effects.ts +168 -0
- package/test/index.ts +8 -0
- package/test/nested.ts +201 -0
- package/test/objects.ts +106 -0
- package/test/primitives.ts +171 -0
- package/test/vite.config.ts +40 -0
- package/build/reactive/object.d.ts +0 -7
- package/build/reactive/object.js +0 -79
- package/src/reactive/object.ts +0 -116
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import { uid } from '@esportsplus/typescript/transformer';
|
|
2
|
+
import ts from 'typescript';
|
|
3
|
+
import { addMissingImports, applyReplacements } from './utilities.js';
|
|
4
|
+
const CLASS_NAME_REGEX = /class (\w+)/;
|
|
5
|
+
const EXTRA_IMPORTS = [
|
|
6
|
+
{ module: '@esportsplus/reactivity/constants', specifier: 'REACTIVE_OBJECT' },
|
|
7
|
+
{ module: '@esportsplus/reactivity/reactive/array', specifier: 'ReactiveArray' }
|
|
8
|
+
];
|
|
9
|
+
function analyzeProperty(prop, sourceFile) {
|
|
10
|
+
if (!ts.isPropertyAssignment(prop)) {
|
|
11
|
+
return null;
|
|
12
|
+
}
|
|
13
|
+
let key;
|
|
14
|
+
if (ts.isIdentifier(prop.name) || ts.isStringLiteral(prop.name)) {
|
|
15
|
+
key = prop.name.text;
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
let value = prop.initializer, valueText = value.getText(sourceFile);
|
|
21
|
+
if (ts.isArrowFunction(value) || ts.isFunctionExpression(value)) {
|
|
22
|
+
return { key, type: 'computed', valueText };
|
|
23
|
+
}
|
|
24
|
+
if (ts.isArrayLiteralExpression(value)) {
|
|
25
|
+
return { key, type: 'array', valueText };
|
|
26
|
+
}
|
|
27
|
+
return { key, type: 'signal', valueText };
|
|
28
|
+
}
|
|
29
|
+
function buildClassCode(className, properties) {
|
|
30
|
+
let accessors = [], disposeStatements = [], fields = [];
|
|
31
|
+
fields.push(`[REACTIVE_OBJECT] = true;`);
|
|
32
|
+
for (let i = 0, n = properties.length; i < n; i++) {
|
|
33
|
+
let { key, type, valueText } = properties[i];
|
|
34
|
+
if (type === 'signal') {
|
|
35
|
+
let param = uid('v');
|
|
36
|
+
fields.push(`#${key} = signal(${valueText});`);
|
|
37
|
+
accessors.push(`get ${key}() { return read(this.#${key}); }`);
|
|
38
|
+
accessors.push(`set ${key}(${param}) { set(this.#${key}, ${param}); }`);
|
|
39
|
+
}
|
|
40
|
+
else if (type === 'array') {
|
|
41
|
+
let elements = valueText.slice(1, -1);
|
|
42
|
+
fields.push(`${key} = new ReactiveArray(${elements});`);
|
|
43
|
+
disposeStatements.push(`this.${key}.dispose();`);
|
|
44
|
+
}
|
|
45
|
+
else if (type === 'computed') {
|
|
46
|
+
fields.push(`#${key}: Computed<unknown> | null = null;`);
|
|
47
|
+
accessors.push(`get ${key}() { return read(this.#${key} ??= computed(${valueText})); }`);
|
|
48
|
+
disposeStatements.push(`if (this.#${key}) dispose(this.#${key});`);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
let disposeBody = disposeStatements.length > 0 ? disposeStatements.join('\n') : '';
|
|
52
|
+
return `
|
|
53
|
+
class ${className} {
|
|
54
|
+
${fields.join('\n')}
|
|
55
|
+
${accessors.join('\n')}
|
|
56
|
+
|
|
57
|
+
dispose() {
|
|
58
|
+
${disposeBody}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
`;
|
|
62
|
+
}
|
|
63
|
+
const transformReactiveObjects = (sourceFile, bindings) => {
|
|
64
|
+
let allNeededImports = new Set(), calls = [], code = sourceFile.getFullText(), hasReactiveImport = false, lastImportEnd = 0;
|
|
65
|
+
function visit(node) {
|
|
66
|
+
if (ts.isImportDeclaration(node)) {
|
|
67
|
+
lastImportEnd = node.end;
|
|
68
|
+
if (ts.isStringLiteral(node.moduleSpecifier) &&
|
|
69
|
+
node.moduleSpecifier.text.includes('@esportsplus/reactivity')) {
|
|
70
|
+
let clause = node.importClause;
|
|
71
|
+
if (clause?.namedBindings && ts.isNamedImports(clause.namedBindings)) {
|
|
72
|
+
let elements = clause.namedBindings.elements;
|
|
73
|
+
for (let i = 0, n = elements.length; i < n; i++) {
|
|
74
|
+
if (elements[i].name.text === 'reactive') {
|
|
75
|
+
hasReactiveImport = true;
|
|
76
|
+
break;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
if (hasReactiveImport &&
|
|
83
|
+
ts.isCallExpression(node) &&
|
|
84
|
+
ts.isIdentifier(node.expression) &&
|
|
85
|
+
node.expression.text === 'reactive') {
|
|
86
|
+
let arg = node.arguments[0];
|
|
87
|
+
if (arg && ts.isObjectLiteralExpression(arg)) {
|
|
88
|
+
let varName = null;
|
|
89
|
+
if (ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
|
|
90
|
+
varName = node.parent.name.text;
|
|
91
|
+
bindings.set(varName, 'object');
|
|
92
|
+
}
|
|
93
|
+
let needsImports = new Set(), properties = [];
|
|
94
|
+
needsImports.add('REACTIVE_OBJECT');
|
|
95
|
+
let props = arg.properties;
|
|
96
|
+
for (let i = 0, n = props.length; i < n; i++) {
|
|
97
|
+
let prop = props[i];
|
|
98
|
+
if (ts.isSpreadAssignment(prop)) {
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
101
|
+
let analyzed = analyzeProperty(prop, sourceFile);
|
|
102
|
+
if (!analyzed) {
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
properties.push(analyzed);
|
|
106
|
+
if (analyzed.type === 'signal') {
|
|
107
|
+
needsImports.add('read');
|
|
108
|
+
needsImports.add('set');
|
|
109
|
+
needsImports.add('signal');
|
|
110
|
+
}
|
|
111
|
+
else if (analyzed.type === 'array') {
|
|
112
|
+
needsImports.add('ReactiveArray');
|
|
113
|
+
if (varName) {
|
|
114
|
+
bindings.set(`${varName}.${analyzed.key}`, 'array');
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
else if (analyzed.type === 'computed') {
|
|
118
|
+
needsImports.add('computed');
|
|
119
|
+
needsImports.add('dispose');
|
|
120
|
+
needsImports.add('read');
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
needsImports.forEach(imp => allNeededImports.add(imp));
|
|
124
|
+
calls.push({
|
|
125
|
+
end: node.end,
|
|
126
|
+
generatedClass: buildClassCode(uid('ReactiveObject'), properties),
|
|
127
|
+
needsImports,
|
|
128
|
+
start: node.pos,
|
|
129
|
+
varName
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
ts.forEachChild(node, visit);
|
|
134
|
+
}
|
|
135
|
+
visit(sourceFile);
|
|
136
|
+
if (calls.length === 0) {
|
|
137
|
+
return code;
|
|
138
|
+
}
|
|
139
|
+
let replacements = [];
|
|
140
|
+
replacements.push({
|
|
141
|
+
end: lastImportEnd,
|
|
142
|
+
newText: code.substring(0, lastImportEnd) + '\n' + calls.map(c => c.generatedClass).join('\n') + '\n',
|
|
143
|
+
start: 0
|
|
144
|
+
});
|
|
145
|
+
for (let i = 0, n = calls.length; i < n; i++) {
|
|
146
|
+
let call = calls[i], classMatch = call.generatedClass.match(CLASS_NAME_REGEX);
|
|
147
|
+
replacements.push({
|
|
148
|
+
end: call.end,
|
|
149
|
+
newText: ` new ${classMatch ? classMatch[1] : 'ReactiveObject'}()`,
|
|
150
|
+
start: call.start
|
|
151
|
+
});
|
|
152
|
+
}
|
|
153
|
+
return addMissingImports(applyReplacements(code, replacements), allNeededImports, EXTRA_IMPORTS);
|
|
154
|
+
};
|
|
155
|
+
export { transformReactiveObjects };
|
|
@@ -0,0 +1,325 @@
|
|
|
1
|
+
import { uid } from '@esportsplus/typescript/transformer';
|
|
2
|
+
import ts from 'typescript';
|
|
3
|
+
import { addMissingImports, applyReplacements } from './utilities.js';
|
|
4
|
+
function findEnclosingScope(node) {
|
|
5
|
+
let current = node.parent;
|
|
6
|
+
while (current) {
|
|
7
|
+
if (ts.isBlock(current) ||
|
|
8
|
+
ts.isSourceFile(current) ||
|
|
9
|
+
ts.isFunctionDeclaration(current) ||
|
|
10
|
+
ts.isFunctionExpression(current) ||
|
|
11
|
+
ts.isArrowFunction(current) ||
|
|
12
|
+
ts.isForStatement(current) ||
|
|
13
|
+
ts.isForInStatement(current) ||
|
|
14
|
+
ts.isForOfStatement(current)) {
|
|
15
|
+
return current;
|
|
16
|
+
}
|
|
17
|
+
current = current.parent;
|
|
18
|
+
}
|
|
19
|
+
return node.getSourceFile();
|
|
20
|
+
}
|
|
21
|
+
function findBinding(bindings, name, node) {
|
|
22
|
+
for (let i = 0, n = bindings.length; i < n; i++) {
|
|
23
|
+
let b = bindings[i];
|
|
24
|
+
if (b.name === name && isInScope(node, b)) {
|
|
25
|
+
return b;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return undefined;
|
|
29
|
+
}
|
|
30
|
+
function isInComputedRange(ranges, start, end) {
|
|
31
|
+
for (let i = 0, n = ranges.length; i < n; i++) {
|
|
32
|
+
let r = ranges[i];
|
|
33
|
+
if (start >= r.start && end <= r.end) {
|
|
34
|
+
return true;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
return false;
|
|
38
|
+
}
|
|
39
|
+
function isInScope(reference, binding) {
|
|
40
|
+
let current = reference;
|
|
41
|
+
while (current) {
|
|
42
|
+
if (current === binding.scope) {
|
|
43
|
+
return true;
|
|
44
|
+
}
|
|
45
|
+
current = current.parent;
|
|
46
|
+
}
|
|
47
|
+
return false;
|
|
48
|
+
}
|
|
49
|
+
function classifyReactiveArg(arg) {
|
|
50
|
+
if (ts.isArrowFunction(arg) || ts.isFunctionExpression(arg)) {
|
|
51
|
+
return 'computed';
|
|
52
|
+
}
|
|
53
|
+
if (ts.isObjectLiteralExpression(arg) || ts.isArrayLiteralExpression(arg)) {
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
return 'signal';
|
|
57
|
+
}
|
|
58
|
+
function isInDeclarationInit(node) {
|
|
59
|
+
let parent = node.parent;
|
|
60
|
+
if (ts.isVariableDeclaration(parent) && parent.initializer === node) {
|
|
61
|
+
return true;
|
|
62
|
+
}
|
|
63
|
+
return false;
|
|
64
|
+
}
|
|
65
|
+
function isReactiveReassignment(node) {
|
|
66
|
+
let parent = node.parent;
|
|
67
|
+
if (ts.isBinaryExpression(parent) &&
|
|
68
|
+
parent.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
|
|
69
|
+
parent.right === node &&
|
|
70
|
+
ts.isCallExpression(node) &&
|
|
71
|
+
ts.isIdentifier(node.expression) &&
|
|
72
|
+
node.expression.text === 'reactive') {
|
|
73
|
+
return true;
|
|
74
|
+
}
|
|
75
|
+
return false;
|
|
76
|
+
}
|
|
77
|
+
function isWriteContext(node) {
|
|
78
|
+
let parent = node.parent;
|
|
79
|
+
if (ts.isBinaryExpression(parent) && parent.left === node) {
|
|
80
|
+
let op = parent.operatorToken.kind;
|
|
81
|
+
if (op === ts.SyntaxKind.EqualsToken) {
|
|
82
|
+
return 'simple';
|
|
83
|
+
}
|
|
84
|
+
if (op >= ts.SyntaxKind.PlusEqualsToken && op <= ts.SyntaxKind.CaretEqualsToken) {
|
|
85
|
+
return 'compound';
|
|
86
|
+
}
|
|
87
|
+
if (op === ts.SyntaxKind.AmpersandAmpersandEqualsToken ||
|
|
88
|
+
op === ts.SyntaxKind.BarBarEqualsToken ||
|
|
89
|
+
op === ts.SyntaxKind.QuestionQuestionEqualsToken) {
|
|
90
|
+
return 'compound';
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
if (ts.isPostfixUnaryExpression(parent) || ts.isPrefixUnaryExpression(parent)) {
|
|
94
|
+
let op = parent.operator;
|
|
95
|
+
if (op === ts.SyntaxKind.PlusPlusToken || op === ts.SyntaxKind.MinusMinusToken) {
|
|
96
|
+
return 'increment';
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
return false;
|
|
100
|
+
}
|
|
101
|
+
function getCompoundOperator(kind) {
|
|
102
|
+
if (kind === ts.SyntaxKind.PlusEqualsToken) {
|
|
103
|
+
return '+';
|
|
104
|
+
}
|
|
105
|
+
else if (kind === ts.SyntaxKind.MinusEqualsToken) {
|
|
106
|
+
return '-';
|
|
107
|
+
}
|
|
108
|
+
else if (kind === ts.SyntaxKind.AsteriskEqualsToken) {
|
|
109
|
+
return '*';
|
|
110
|
+
}
|
|
111
|
+
else if (kind === ts.SyntaxKind.SlashEqualsToken) {
|
|
112
|
+
return '/';
|
|
113
|
+
}
|
|
114
|
+
else if (kind === ts.SyntaxKind.PercentEqualsToken) {
|
|
115
|
+
return '%';
|
|
116
|
+
}
|
|
117
|
+
else if (kind === ts.SyntaxKind.AsteriskAsteriskEqualsToken) {
|
|
118
|
+
return '**';
|
|
119
|
+
}
|
|
120
|
+
else if (kind === ts.SyntaxKind.AmpersandEqualsToken) {
|
|
121
|
+
return '&';
|
|
122
|
+
}
|
|
123
|
+
else if (kind === ts.SyntaxKind.BarEqualsToken) {
|
|
124
|
+
return '|';
|
|
125
|
+
}
|
|
126
|
+
else if (kind === ts.SyntaxKind.CaretEqualsToken) {
|
|
127
|
+
return '^';
|
|
128
|
+
}
|
|
129
|
+
else if (kind === ts.SyntaxKind.LessThanLessThanEqualsToken) {
|
|
130
|
+
return '<<';
|
|
131
|
+
}
|
|
132
|
+
else if (kind === ts.SyntaxKind.GreaterThanGreaterThanEqualsToken) {
|
|
133
|
+
return '>>';
|
|
134
|
+
}
|
|
135
|
+
else if (kind === ts.SyntaxKind.GreaterThanGreaterThanGreaterThanEqualsToken) {
|
|
136
|
+
return '>>>';
|
|
137
|
+
}
|
|
138
|
+
else if (kind === ts.SyntaxKind.AmpersandAmpersandEqualsToken) {
|
|
139
|
+
return '&&';
|
|
140
|
+
}
|
|
141
|
+
else if (kind === ts.SyntaxKind.BarBarEqualsToken) {
|
|
142
|
+
return '||';
|
|
143
|
+
}
|
|
144
|
+
else if (kind === ts.SyntaxKind.QuestionQuestionEqualsToken) {
|
|
145
|
+
return '??';
|
|
146
|
+
}
|
|
147
|
+
else {
|
|
148
|
+
return '+';
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
function transformComputedArg(arg, scopedBindings, sourceFile, neededImports) {
|
|
152
|
+
let argStart = arg.getStart(sourceFile), innerReplacements = [], text = arg.getText(sourceFile);
|
|
153
|
+
function visitArg(node) {
|
|
154
|
+
if (ts.isIdentifier(node)) {
|
|
155
|
+
if (ts.isPropertyAccessExpression(node.parent) && node.parent.name === node) {
|
|
156
|
+
ts.forEachChild(node, visitArg);
|
|
157
|
+
return;
|
|
158
|
+
}
|
|
159
|
+
if (ts.isCallExpression(node.parent) && node.parent.expression === node) {
|
|
160
|
+
ts.forEachChild(node, visitArg);
|
|
161
|
+
return;
|
|
162
|
+
}
|
|
163
|
+
let binding = findBinding(scopedBindings, node.text, node);
|
|
164
|
+
if (binding) {
|
|
165
|
+
neededImports.add('read');
|
|
166
|
+
innerReplacements.push({
|
|
167
|
+
end: node.end - argStart,
|
|
168
|
+
newText: `read(${node.text})`,
|
|
169
|
+
start: node.getStart(sourceFile) - argStart
|
|
170
|
+
});
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
ts.forEachChild(node, visitArg);
|
|
174
|
+
}
|
|
175
|
+
visitArg(arg);
|
|
176
|
+
return applyReplacements(text, innerReplacements);
|
|
177
|
+
}
|
|
178
|
+
const transformReactivePrimitives = (sourceFile, bindings) => {
|
|
179
|
+
let code = sourceFile.getFullText(), computedArgRanges = [], hasReactiveImport = false, neededImports = new Set(), replacements = [], scopedBindings = [];
|
|
180
|
+
function visit(node) {
|
|
181
|
+
if (ts.isImportDeclaration(node) &&
|
|
182
|
+
ts.isStringLiteral(node.moduleSpecifier) &&
|
|
183
|
+
node.moduleSpecifier.text.includes('@esportsplus/reactivity')) {
|
|
184
|
+
let clause = node.importClause;
|
|
185
|
+
if (clause?.namedBindings && ts.isNamedImports(clause.namedBindings)) {
|
|
186
|
+
for (let i = 0, n = clause.namedBindings.elements.length; i < n; i++) {
|
|
187
|
+
if (clause.namedBindings.elements[i].name.text === 'reactive') {
|
|
188
|
+
hasReactiveImport = true;
|
|
189
|
+
break;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
if (hasReactiveImport &&
|
|
195
|
+
ts.isCallExpression(node) &&
|
|
196
|
+
ts.isIdentifier(node.expression) &&
|
|
197
|
+
node.expression.text === 'reactive' &&
|
|
198
|
+
node.arguments.length > 0) {
|
|
199
|
+
let arg = node.arguments[0], classification = classifyReactiveArg(arg);
|
|
200
|
+
if (classification) {
|
|
201
|
+
let varName = null;
|
|
202
|
+
if (ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
|
|
203
|
+
varName = node.parent.name.text;
|
|
204
|
+
}
|
|
205
|
+
else if (ts.isBinaryExpression(node.parent) &&
|
|
206
|
+
node.parent.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
|
|
207
|
+
ts.isIdentifier(node.parent.left)) {
|
|
208
|
+
varName = node.parent.left.text;
|
|
209
|
+
}
|
|
210
|
+
if (varName) {
|
|
211
|
+
let scope = findEnclosingScope(node);
|
|
212
|
+
scopedBindings.push({ name: varName, scope, type: classification });
|
|
213
|
+
bindings.set(varName, classification);
|
|
214
|
+
}
|
|
215
|
+
if (classification === 'computed') {
|
|
216
|
+
computedArgRanges.push({
|
|
217
|
+
end: arg.end,
|
|
218
|
+
start: arg.getStart(sourceFile)
|
|
219
|
+
});
|
|
220
|
+
let argText = transformComputedArg(arg, scopedBindings, sourceFile, neededImports);
|
|
221
|
+
replacements.push({
|
|
222
|
+
end: node.end,
|
|
223
|
+
newText: `computed(${argText})`,
|
|
224
|
+
start: node.pos
|
|
225
|
+
});
|
|
226
|
+
neededImports.add('computed');
|
|
227
|
+
}
|
|
228
|
+
else {
|
|
229
|
+
let argText = arg.getText(sourceFile);
|
|
230
|
+
replacements.push({
|
|
231
|
+
end: node.end,
|
|
232
|
+
newText: `signal(${argText})`,
|
|
233
|
+
start: node.pos
|
|
234
|
+
});
|
|
235
|
+
neededImports.add('signal');
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
if (ts.isIdentifier(node) && !isInDeclarationInit(node.parent)) {
|
|
240
|
+
if (ts.isPropertyAccessExpression(node.parent) && node.parent.name === node) {
|
|
241
|
+
ts.forEachChild(node, visit);
|
|
242
|
+
return;
|
|
243
|
+
}
|
|
244
|
+
let nodeStart = node.getStart(sourceFile);
|
|
245
|
+
let insideComputedArg = isInComputedRange(computedArgRanges, nodeStart, node.end);
|
|
246
|
+
if (insideComputedArg) {
|
|
247
|
+
ts.forEachChild(node, visit);
|
|
248
|
+
return;
|
|
249
|
+
}
|
|
250
|
+
let binding = findBinding(scopedBindings, node.text, node), name = node.text;
|
|
251
|
+
if (binding) {
|
|
252
|
+
if (!isReactiveReassignment(node.parent) &&
|
|
253
|
+
!(ts.isTypeOfExpression(node.parent) && node.parent.expression === node)) {
|
|
254
|
+
let writeCtx = isWriteContext(node);
|
|
255
|
+
if (writeCtx) {
|
|
256
|
+
if (binding.type !== 'computed') {
|
|
257
|
+
neededImports.add('set');
|
|
258
|
+
let parent = node.parent;
|
|
259
|
+
if (writeCtx === 'simple' && ts.isBinaryExpression(parent)) {
|
|
260
|
+
let valueText = parent.right.getText(sourceFile);
|
|
261
|
+
replacements.push({
|
|
262
|
+
end: parent.end,
|
|
263
|
+
newText: `set(${name}, ${valueText})`,
|
|
264
|
+
start: parent.pos
|
|
265
|
+
});
|
|
266
|
+
}
|
|
267
|
+
else if (writeCtx === 'compound' && ts.isBinaryExpression(parent)) {
|
|
268
|
+
let op = getCompoundOperator(parent.operatorToken.kind), valueText = parent.right.getText(sourceFile);
|
|
269
|
+
replacements.push({
|
|
270
|
+
end: parent.end,
|
|
271
|
+
newText: `set(${name}, ${name}.value ${op} ${valueText})`,
|
|
272
|
+
start: parent.pos
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
else if (writeCtx === 'increment') {
|
|
276
|
+
let isPrefix = ts.isPrefixUnaryExpression(parent), op = parent.operator, delta = op === ts.SyntaxKind.PlusPlusToken ? '+ 1' : '- 1';
|
|
277
|
+
if (ts.isExpressionStatement(parent.parent)) {
|
|
278
|
+
replacements.push({
|
|
279
|
+
end: parent.end,
|
|
280
|
+
newText: `set(${name}, ${name}.value ${delta})`,
|
|
281
|
+
start: parent.pos
|
|
282
|
+
});
|
|
283
|
+
}
|
|
284
|
+
else if (isPrefix) {
|
|
285
|
+
replacements.push({
|
|
286
|
+
end: parent.end,
|
|
287
|
+
newText: `(set(${name}, ${name}.value ${delta}), ${name}.value)`,
|
|
288
|
+
start: parent.pos
|
|
289
|
+
});
|
|
290
|
+
}
|
|
291
|
+
else {
|
|
292
|
+
let tmp = uid('tmp');
|
|
293
|
+
replacements.push({
|
|
294
|
+
end: parent.end,
|
|
295
|
+
newText: `((${tmp}) => (set(${name}, ${tmp} ${delta}), ${tmp}))(${name}.value)`,
|
|
296
|
+
start: parent.pos
|
|
297
|
+
});
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
else {
|
|
303
|
+
neededImports.add('read');
|
|
304
|
+
replacements.push({
|
|
305
|
+
end: node.end,
|
|
306
|
+
newText: `read(${name})`,
|
|
307
|
+
start: node.pos
|
|
308
|
+
});
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
ts.forEachChild(node, visit);
|
|
314
|
+
}
|
|
315
|
+
visit(sourceFile);
|
|
316
|
+
if (replacements.length === 0) {
|
|
317
|
+
return code;
|
|
318
|
+
}
|
|
319
|
+
let result = applyReplacements(code, replacements);
|
|
320
|
+
if (neededImports.size > 0) {
|
|
321
|
+
result = addMissingImports(result, neededImports);
|
|
322
|
+
}
|
|
323
|
+
return result;
|
|
324
|
+
};
|
|
325
|
+
export { transformReactivePrimitives };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Replacement } from '@esportsplus/typescript/transformer';
|
|
2
|
+
import { applyReplacements } from '@esportsplus/typescript/transformer';
|
|
3
|
+
type ExtraImport = {
|
|
4
|
+
module: string;
|
|
5
|
+
specifier: string;
|
|
6
|
+
};
|
|
7
|
+
declare const addMissingImports: (code: string, needed: Set<string>, extraImports?: ExtraImport[]) => string;
|
|
8
|
+
export { addMissingImports, applyReplacements };
|
|
9
|
+
export type { ExtraImport, Replacement };
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { applyReplacements } from '@esportsplus/typescript/transformer';
|
|
2
|
+
const BRACES_CONTENT_REGEX = /\{([^}]*)\}/;
|
|
3
|
+
const REACTIVITY_IMPORT_REGEX = /(import\s*\{[^}]*\}\s*from\s*['"]@esportsplus\/reactivity['"])/;
|
|
4
|
+
const addMissingImports = (code, needed, extraImports) => {
|
|
5
|
+
let reactivityImportMatch = code.match(REACTIVITY_IMPORT_REGEX);
|
|
6
|
+
if (!reactivityImportMatch) {
|
|
7
|
+
return code;
|
|
8
|
+
}
|
|
9
|
+
let bracesMatch = reactivityImportMatch[1].match(BRACES_CONTENT_REGEX), existing = new Set(), existingImport = reactivityImportMatch[1], extraSpecifiers = new Set(), toAdd = [];
|
|
10
|
+
if (bracesMatch?.[1]) {
|
|
11
|
+
let parts = bracesMatch[1].split(',');
|
|
12
|
+
for (let i = 0, n = parts.length; i < n; i++) {
|
|
13
|
+
let trimmed = parts[i].trim();
|
|
14
|
+
if (trimmed) {
|
|
15
|
+
existing.add(trimmed);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
if (extraImports) {
|
|
20
|
+
for (let i = 0, n = extraImports.length; i < n; i++) {
|
|
21
|
+
extraSpecifiers.add(extraImports[i].specifier);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
for (let imp of needed) {
|
|
25
|
+
if (!extraSpecifiers.has(imp) && !existing.has(imp)) {
|
|
26
|
+
toAdd.push(imp);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
if (toAdd.length > 0) {
|
|
30
|
+
let combined = [];
|
|
31
|
+
for (let item of existing) {
|
|
32
|
+
if (item) {
|
|
33
|
+
combined.push(item);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
for (let i = 0, n = toAdd.length; i < n; i++) {
|
|
37
|
+
if (toAdd[i]) {
|
|
38
|
+
combined.push(toAdd[i]);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
combined.sort();
|
|
42
|
+
code = code.replace(existingImport, existingImport.replace(BRACES_CONTENT_REGEX, `{ ${combined.join(', ')} }`));
|
|
43
|
+
}
|
|
44
|
+
if (extraImports) {
|
|
45
|
+
for (let i = 0, n = extraImports.length; i < n; i++) {
|
|
46
|
+
let extra = extraImports[i];
|
|
47
|
+
if (needed.has(extra.specifier) && !code.includes(extra.module)) {
|
|
48
|
+
let insertPos = code.indexOf('import');
|
|
49
|
+
code = code.substring(0, insertPos) +
|
|
50
|
+
`import { ${extra.specifier} } from '${extra.module}';\n` +
|
|
51
|
+
code.substring(insertPos);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
return code;
|
|
56
|
+
};
|
|
57
|
+
export { addMissingImports, applyReplacements };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { mightNeedTransform, transform } from '../../transformer/core/index.js';
|
|
2
|
+
import fs from 'fs';
|
|
3
|
+
import ts from 'typescript';
|
|
4
|
+
export default (options) => {
|
|
5
|
+
return {
|
|
6
|
+
name: '@esportsplus/reactivity/plugin-esbuild',
|
|
7
|
+
setup(build) {
|
|
8
|
+
build.onLoad({ filter: /\.[tj]sx?$/ }, async (args) => {
|
|
9
|
+
let code = await fs.promises.readFile(args.path, 'utf8');
|
|
10
|
+
if (!mightNeedTransform(code)) {
|
|
11
|
+
return null;
|
|
12
|
+
}
|
|
13
|
+
try {
|
|
14
|
+
let sourceFile = ts.createSourceFile(args.path, code, ts.ScriptTarget.Latest, true), result = transform(sourceFile, options);
|
|
15
|
+
if (!result.transformed) {
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
return {
|
|
19
|
+
contents: result.code,
|
|
20
|
+
loader: args.path.endsWith('x') ? 'tsx' : 'ts'
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
catch (error) {
|
|
24
|
+
console.error(`@esportsplus/reactivity: Error transforming ${args.path}:`, error);
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { mightNeedTransform, transform } from '../../transformer/core/index.js';
|
|
2
|
+
import ts from 'typescript';
|
|
3
|
+
const TRANSFORM_PATTERN = /\.[tj]sx?$/;
|
|
4
|
+
export default (options) => {
|
|
5
|
+
return {
|
|
6
|
+
enforce: 'pre',
|
|
7
|
+
name: '@esportsplus/reactivity/plugin-vite',
|
|
8
|
+
transform(code, id) {
|
|
9
|
+
if (!TRANSFORM_PATTERN.test(id) || id.includes('node_modules')) {
|
|
10
|
+
return null;
|
|
11
|
+
}
|
|
12
|
+
if (!mightNeedTransform(code)) {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
try {
|
|
16
|
+
let sourceFile = ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true), result = transform(sourceFile, options);
|
|
17
|
+
if (!result.transformed) {
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
return { code: result.code, map: null };
|
|
21
|
+
}
|
|
22
|
+
catch (error) {
|
|
23
|
+
console.error(`@esportsplus/reactivity: Error transforming ${id}:`, error);
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
};
|
package/build/types.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { COMPUTED, SIGNAL, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_RECOMPUTING } from './constants.js';
|
|
2
|
-
import { ReactiveArray } from './reactive/
|
|
3
|
-
import
|
|
2
|
+
import { ReactiveArray, ReactiveObject } from './reactive/index.js';
|
|
3
|
+
import ts from 'typescript';
|
|
4
|
+
type BindingType = 'array' | 'computed' | 'object' | 'signal';
|
|
5
|
+
type Bindings = Map<string, BindingType>;
|
|
4
6
|
interface Computed<T> {
|
|
5
7
|
cleanup: VoidFunction | VoidFunction[] | null;
|
|
6
8
|
deps: Link | null;
|
|
@@ -17,10 +19,10 @@ interface Computed<T> {
|
|
|
17
19
|
}
|
|
18
20
|
interface Link {
|
|
19
21
|
dep: Signal<unknown> | Computed<unknown>;
|
|
20
|
-
sub: Computed<unknown>;
|
|
21
22
|
nextDep: Link | null;
|
|
22
23
|
nextSub: Link | null;
|
|
23
24
|
prevSub: Link | null;
|
|
25
|
+
sub: Computed<unknown>;
|
|
24
26
|
version: number;
|
|
25
27
|
}
|
|
26
28
|
type Signal<T> = {
|
|
@@ -29,4 +31,12 @@ type Signal<T> = {
|
|
|
29
31
|
type: typeof SIGNAL;
|
|
30
32
|
value: T;
|
|
31
33
|
};
|
|
32
|
-
|
|
34
|
+
interface TransformOptions {
|
|
35
|
+
autoDispose?: boolean;
|
|
36
|
+
}
|
|
37
|
+
interface TransformResult {
|
|
38
|
+
code: string;
|
|
39
|
+
sourceFile: ts.SourceFile;
|
|
40
|
+
transformed: boolean;
|
|
41
|
+
}
|
|
42
|
+
export type { BindingType, Bindings, Computed, Link, ReactiveArray, ReactiveObject, Signal, TransformOptions, TransformResult };
|