@esportsplus/reactivity 0.29.2 → 0.29.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/build/compiler/array.js +3 -3
- package/build/compiler/index.d.ts +14 -3
- package/build/compiler/index.js +6 -7
- package/build/compiler/object.js +6 -6
- package/build/compiler/plugins/tsc.d.ts +2 -2
- package/build/compiler/plugins/tsc.js +2 -2
- package/build/compiler/plugins/vite.js +2 -2
- package/build/compiler/primitives.js +6 -6
- package/package.json +2 -2
- package/src/compiler/array.ts +3 -3
- package/src/compiler/index.ts +11 -12
- package/src/compiler/object.ts +7 -7
- package/src/compiler/plugins/tsc.ts +2 -2
- package/src/compiler/plugins/vite.ts +2 -2
- package/src/compiler/primitives.ts +6 -6
- package/accordion.js +0 -45
- package/accordion.ts +0 -51
package/build/compiler/array.js
CHANGED
|
@@ -45,7 +45,7 @@ function visit(ctx, node) {
|
|
|
45
45
|
ctx.bindings.set(node.name.text, COMPILER_TYPES.Array);
|
|
46
46
|
}
|
|
47
47
|
if (ts.isPropertyAccessExpression(node.initializer)) {
|
|
48
|
-
let path = ast.
|
|
48
|
+
let path = ast.property.path(node.initializer);
|
|
49
49
|
if (path && ctx.bindings.get(path) === COMPILER_TYPES.Array) {
|
|
50
50
|
ctx.bindings.set(node.name.text, COMPILER_TYPES.Array);
|
|
51
51
|
}
|
|
@@ -68,7 +68,7 @@ function visit(ctx, node) {
|
|
|
68
68
|
(!(ts.isBinaryExpression(node.parent) && node.parent.left === node) &&
|
|
69
69
|
!ts.isPostfixUnaryExpression(node.parent) &&
|
|
70
70
|
!ts.isPrefixUnaryExpression(node.parent)))) {
|
|
71
|
-
let name = ast.
|
|
71
|
+
let name = ast.expression.name(node.expression);
|
|
72
72
|
if (name && ctx.bindings.get(name) === COMPILER_TYPES.Array) {
|
|
73
73
|
ctx.replacements.push({
|
|
74
74
|
node,
|
|
@@ -79,7 +79,7 @@ function visit(ctx, node) {
|
|
|
79
79
|
if (ts.isBinaryExpression(node) &&
|
|
80
80
|
node.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
|
|
81
81
|
ts.isElementAccessExpression(node.left)) {
|
|
82
|
-
let element = node.left, name = ast.
|
|
82
|
+
let element = node.left, name = ast.expression.name(element.expression);
|
|
83
83
|
if (name && ctx.bindings.get(name) === COMPILER_TYPES.Array) {
|
|
84
84
|
ctx.replacements.push({
|
|
85
85
|
node,
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
declare const
|
|
3
|
-
|
|
1
|
+
import type { ImportIntent, ReplacementIntent, TransformContext } from '@esportsplus/typescript/compiler';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
patterns: string[];
|
|
4
|
+
transform: (ctx: TransformContext) => {
|
|
5
|
+
imports?: undefined;
|
|
6
|
+
prepend?: undefined;
|
|
7
|
+
replacements?: undefined;
|
|
8
|
+
} | {
|
|
9
|
+
imports: ImportIntent[];
|
|
10
|
+
prepend: string[];
|
|
11
|
+
replacements: ReplacementIntent[];
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export default _default;
|
package/build/compiler/index.js
CHANGED
|
@@ -19,11 +19,11 @@ function isReactiveCallExpression(checker, node) {
|
|
|
19
19
|
return true;
|
|
20
20
|
}
|
|
21
21
|
if (checker) {
|
|
22
|
-
return imports.
|
|
22
|
+
return imports.includes(checker, expr, PACKAGE, COMPILER_ENTRYPOINT);
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
if (ts.isPropertyAccessExpression(expr) && expr.name.text === COMPILER_ENTRYPOINT && checker) {
|
|
26
|
-
return imports.
|
|
26
|
+
return imports.includes(checker, expr, PACKAGE);
|
|
27
27
|
}
|
|
28
28
|
return false;
|
|
29
29
|
}
|
|
@@ -36,14 +36,14 @@ function visit(ctx, node) {
|
|
|
36
36
|
}
|
|
37
37
|
ts.forEachChild(node, n => visit(ctx, n));
|
|
38
38
|
}
|
|
39
|
-
|
|
39
|
+
export default {
|
|
40
40
|
patterns: ['reactive(', 'reactive<'],
|
|
41
41
|
transform: (ctx) => {
|
|
42
|
-
if (!imports.
|
|
42
|
+
if (!imports.all(ctx.sourceFile, PACKAGE).some(i => i.specifiers.has(COMPILER_ENTRYPOINT))) {
|
|
43
43
|
return {};
|
|
44
44
|
}
|
|
45
|
-
let bindings = new Map(), importsIntent = [],
|
|
46
|
-
replacements.push(...primitives(ctx.sourceFile, bindings,
|
|
45
|
+
let bindings = new Map(), importsIntent = [], prepend = [], replacements = [];
|
|
46
|
+
replacements.push(...primitives(ctx.sourceFile, bindings, (node) => isReactiveCallExpression(ctx.checker, node)));
|
|
47
47
|
let objectResult = object(ctx.sourceFile, bindings);
|
|
48
48
|
prepend.push(...objectResult.prepend);
|
|
49
49
|
replacements.push(...objectResult.replacements);
|
|
@@ -63,4 +63,3 @@ const plugin = {
|
|
|
63
63
|
};
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
|
-
export default plugin;
|
package/build/compiler/object.js
CHANGED
|
@@ -114,10 +114,10 @@ function visit(ctx, node) {
|
|
|
114
114
|
if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === 'reactive') {
|
|
115
115
|
let arg = node.arguments[0];
|
|
116
116
|
if (arg && ts.isObjectLiteralExpression(arg)) {
|
|
117
|
-
let properties = [], props = arg.properties,
|
|
117
|
+
let properties = [], props = arg.properties, varname = null;
|
|
118
118
|
if (node.parent && ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
|
|
119
|
-
|
|
120
|
-
ctx.bindings.set(
|
|
119
|
+
varname = node.parent.name.text;
|
|
120
|
+
ctx.bindings.set(varname, COMPILER_TYPES.Object);
|
|
121
121
|
}
|
|
122
122
|
for (let i = 0, n = props.length; i < n; i++) {
|
|
123
123
|
let prop = props[i];
|
|
@@ -131,15 +131,15 @@ function visit(ctx, node) {
|
|
|
131
131
|
return;
|
|
132
132
|
}
|
|
133
133
|
properties.push(analyzed);
|
|
134
|
-
if (analyzed.type === COMPILER_TYPES.Array &&
|
|
135
|
-
ctx.bindings.set(`${
|
|
134
|
+
if (analyzed.type === COMPILER_TYPES.Array && varname) {
|
|
135
|
+
ctx.bindings.set(`${varname}.${analyzed.key}`, COMPILER_TYPES.Array);
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
ctx.calls.push({
|
|
139
139
|
className: uid('ReactiveObject'),
|
|
140
140
|
node,
|
|
141
141
|
properties,
|
|
142
|
-
|
|
142
|
+
varname
|
|
143
143
|
});
|
|
144
144
|
}
|
|
145
145
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
export default
|
|
1
|
+
import reactivity from '../index.js';
|
|
2
|
+
export default reactivity;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
export default
|
|
1
|
+
import reactivity from '../index.js';
|
|
2
|
+
export default reactivity;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { plugin } from '@esportsplus/typescript/compiler';
|
|
2
2
|
import { PACKAGE } from '../../constants.js';
|
|
3
|
-
import
|
|
3
|
+
import reactivity from '../index.js';
|
|
4
4
|
export default plugin.vite({
|
|
5
5
|
name: PACKAGE,
|
|
6
|
-
plugins: [
|
|
6
|
+
plugins: [reactivity]
|
|
7
7
|
});
|
|
@@ -39,17 +39,17 @@ function visit(ctx, node) {
|
|
|
39
39
|
classification = null;
|
|
40
40
|
}
|
|
41
41
|
if (classification) {
|
|
42
|
-
let
|
|
42
|
+
let varname = null;
|
|
43
43
|
if (call.parent && ts.isVariableDeclaration(call.parent) && ts.isIdentifier(call.parent.name)) {
|
|
44
|
-
|
|
44
|
+
varname = call.parent.name.text;
|
|
45
45
|
}
|
|
46
46
|
else if (call.parent &&
|
|
47
47
|
ts.isBinaryExpression(call.parent) &&
|
|
48
48
|
call.parent.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
|
|
49
49
|
ts.isIdentifier(call.parent.left)) {
|
|
50
|
-
|
|
50
|
+
varname = call.parent.left.text;
|
|
51
51
|
}
|
|
52
|
-
if (
|
|
52
|
+
if (varname) {
|
|
53
53
|
let current = call.parent, scope;
|
|
54
54
|
while (current) {
|
|
55
55
|
if (ts.isArrowFunction(current) ||
|
|
@@ -67,8 +67,8 @@ function visit(ctx, node) {
|
|
|
67
67
|
if (!scope) {
|
|
68
68
|
scope = call.getSourceFile();
|
|
69
69
|
}
|
|
70
|
-
ctx.
|
|
71
|
-
ctx.
|
|
70
|
+
ctx.bindings.set(varname, classification);
|
|
71
|
+
ctx.scopedBindings.push({ name: varname, scope, type: classification });
|
|
72
72
|
}
|
|
73
73
|
ctx.replacements.push({
|
|
74
74
|
generate: () => classification === COMPILER_TYPES.Computed
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"@esportsplus/utilities": "^0.27.2"
|
|
5
5
|
},
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@esportsplus/typescript": "^0.
|
|
7
|
+
"@esportsplus/typescript": "^0.27.0",
|
|
8
8
|
"@types/node": "^25.0.3",
|
|
9
9
|
"vite": "^7.3.1"
|
|
10
10
|
},
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"type": "module",
|
|
33
33
|
"types": "build/index.d.ts",
|
|
34
|
-
"version": "0.29.
|
|
34
|
+
"version": "0.29.4",
|
|
35
35
|
"scripts": {
|
|
36
36
|
"build": "tsc",
|
|
37
37
|
"build:test": "pnpm build && vite build --config test/vite.config.ts",
|
package/src/compiler/array.ts
CHANGED
|
@@ -64,7 +64,7 @@ function visit(ctx: { bindings: Bindings, replacements: ReplacementIntent[], sou
|
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
if (ts.isPropertyAccessExpression(node.initializer)) {
|
|
67
|
-
let path = ast.
|
|
67
|
+
let path = ast.property.path(node.initializer);
|
|
68
68
|
|
|
69
69
|
if (path && ctx.bindings.get(path) === COMPILER_TYPES.Array) {
|
|
70
70
|
ctx.bindings.set(node.name.text, COMPILER_TYPES.Array);
|
|
@@ -99,7 +99,7 @@ function visit(ctx: { bindings: Bindings, replacements: ReplacementIntent[], sou
|
|
|
99
99
|
)
|
|
100
100
|
)
|
|
101
101
|
) {
|
|
102
|
-
let name = ast.
|
|
102
|
+
let name = ast.expression.name(node.expression);
|
|
103
103
|
|
|
104
104
|
if (name && ctx.bindings.get(name) === COMPILER_TYPES.Array) {
|
|
105
105
|
ctx.replacements.push({
|
|
@@ -115,7 +115,7 @@ function visit(ctx: { bindings: Bindings, replacements: ReplacementIntent[], sou
|
|
|
115
115
|
ts.isElementAccessExpression(node.left)
|
|
116
116
|
) {
|
|
117
117
|
let element = node.left,
|
|
118
|
-
name = ast.
|
|
118
|
+
name = ast.expression.name(element.expression);
|
|
119
119
|
|
|
120
120
|
if (name && ctx.bindings.get(name) === COMPILER_TYPES.Array) {
|
|
121
121
|
ctx.replacements.push({
|
package/src/compiler/index.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ImportIntent,
|
|
1
|
+
import type { ImportIntent, ReplacementIntent, TransformContext } from '@esportsplus/typescript/compiler';
|
|
2
2
|
import { ts } from '@esportsplus/typescript';
|
|
3
3
|
import { imports } from '@esportsplus/typescript/compiler';
|
|
4
4
|
import { COMPILER_ENTRYPOINT, COMPILER_NAMESPACE, PACKAGE } from '~/constants';
|
|
@@ -43,13 +43,13 @@ function isReactiveCallExpression(checker: ts.TypeChecker | undefined, node: ts.
|
|
|
43
43
|
|
|
44
44
|
// Use checker to resolve aliases
|
|
45
45
|
if (checker) {
|
|
46
|
-
return imports.
|
|
46
|
+
return imports.includes(checker, expr, PACKAGE, COMPILER_ENTRYPOINT);
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
// Property access: ns.reactive(...)
|
|
51
51
|
if (ts.isPropertyAccessExpression(expr) && expr.name.text === COMPILER_ENTRYPOINT && checker) {
|
|
52
|
-
return imports.
|
|
52
|
+
return imports.includes(checker, expr, PACKAGE);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
return false;
|
|
@@ -68,22 +68,22 @@ function visit(ctx: FindRemainingContext, node: ts.Node): void {
|
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
export default {
|
|
72
72
|
patterns: ['reactive(', 'reactive<'],
|
|
73
|
-
|
|
74
73
|
transform: (ctx: TransformContext) => {
|
|
75
|
-
if (!imports.
|
|
74
|
+
if (!imports.all(ctx.sourceFile, PACKAGE).some(i => i.specifiers.has(COMPILER_ENTRYPOINT))) {
|
|
76
75
|
return {};
|
|
77
76
|
}
|
|
78
77
|
|
|
79
78
|
let bindings: Bindings = new Map(),
|
|
80
79
|
importsIntent: ImportIntent[] = [],
|
|
81
|
-
isReactive = (node: ts.Node) => isReactiveCallExpression(ctx.checker, node),
|
|
82
80
|
prepend: string[] = [],
|
|
83
81
|
replacements: ReplacementIntent[] = [];
|
|
84
82
|
|
|
85
83
|
// Run primitives transform first (tracks bindings for signal/computed)
|
|
86
|
-
replacements.push(
|
|
84
|
+
replacements.push(
|
|
85
|
+
...primitives(ctx.sourceFile, bindings, (node: ts.Node) => isReactiveCallExpression(ctx.checker, node))
|
|
86
|
+
);
|
|
87
87
|
|
|
88
88
|
// Run object transform
|
|
89
89
|
let objectResult = object(ctx.sourceFile, bindings);
|
|
@@ -95,7 +95,9 @@ const plugin: Plugin = {
|
|
|
95
95
|
replacements.push(...array(ctx.sourceFile, bindings));
|
|
96
96
|
|
|
97
97
|
// Find remaining reactive() calls that weren't transformed and replace with namespace version
|
|
98
|
-
replacements.push(
|
|
98
|
+
replacements.push(
|
|
99
|
+
...findRemainingCalls(ctx.checker, ctx.sourceFile, new Set(replacements.map(r => r.node)))
|
|
100
|
+
);
|
|
99
101
|
|
|
100
102
|
// Build import intent
|
|
101
103
|
if (replacements.length > 0 || prepend.length > 0) {
|
|
@@ -113,6 +115,3 @@ const plugin: Plugin = {
|
|
|
113
115
|
};
|
|
114
116
|
}
|
|
115
117
|
};
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
export default plugin;
|
package/src/compiler/object.ts
CHANGED
|
@@ -16,7 +16,7 @@ interface ReactiveObjectCall {
|
|
|
16
16
|
className: string;
|
|
17
17
|
node: ts.CallExpression;
|
|
18
18
|
properties: AnalyzedProperty[];
|
|
19
|
-
|
|
19
|
+
varname: string | null;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
interface VisitContext {
|
|
@@ -172,11 +172,11 @@ function visit(ctx: VisitContext, node: ts.Node): void {
|
|
|
172
172
|
if (arg && ts.isObjectLiteralExpression(arg)) {
|
|
173
173
|
let properties: AnalyzedProperty[] = [],
|
|
174
174
|
props = arg.properties,
|
|
175
|
-
|
|
175
|
+
varname: string | null = null;
|
|
176
176
|
|
|
177
177
|
if (node.parent && ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
|
|
178
|
-
|
|
179
|
-
ctx.bindings.set(
|
|
178
|
+
varname = node.parent.name.text;
|
|
179
|
+
ctx.bindings.set(varname, COMPILER_TYPES.Object);
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
for (let i = 0, n = props.length; i < n; i++) {
|
|
@@ -196,8 +196,8 @@ function visit(ctx: VisitContext, node: ts.Node): void {
|
|
|
196
196
|
|
|
197
197
|
properties.push(analyzed);
|
|
198
198
|
|
|
199
|
-
if (analyzed.type === COMPILER_TYPES.Array &&
|
|
200
|
-
ctx.bindings.set(`${
|
|
199
|
+
if (analyzed.type === COMPILER_TYPES.Array && varname) {
|
|
200
|
+
ctx.bindings.set(`${varname}.${analyzed.key}`, COMPILER_TYPES.Array);
|
|
201
201
|
}
|
|
202
202
|
}
|
|
203
203
|
|
|
@@ -205,7 +205,7 @@ function visit(ctx: VisitContext, node: ts.Node): void {
|
|
|
205
205
|
className: uid('ReactiveObject'),
|
|
206
206
|
node,
|
|
207
207
|
properties,
|
|
208
|
-
|
|
208
|
+
varname
|
|
209
209
|
});
|
|
210
210
|
}
|
|
211
211
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { plugin } from '@esportsplus/typescript/compiler';
|
|
2
2
|
import { PACKAGE } from '~/constants';
|
|
3
|
-
import
|
|
3
|
+
import reactivity from '..';
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
export default plugin.vite({
|
|
7
7
|
name: PACKAGE,
|
|
8
|
-
plugins: [
|
|
8
|
+
plugins: [reactivity]
|
|
9
9
|
});
|
|
@@ -69,10 +69,10 @@ function visit(ctx: TransformContext, node: ts.Node): void {
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
if (classification) {
|
|
72
|
-
let
|
|
72
|
+
let varname: string | null = null;
|
|
73
73
|
|
|
74
74
|
if (call.parent && ts.isVariableDeclaration(call.parent) && ts.isIdentifier(call.parent.name)) {
|
|
75
|
-
|
|
75
|
+
varname = call.parent.name.text;
|
|
76
76
|
}
|
|
77
77
|
else if (
|
|
78
78
|
call.parent &&
|
|
@@ -80,10 +80,10 @@ function visit(ctx: TransformContext, node: ts.Node): void {
|
|
|
80
80
|
call.parent.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
|
|
81
81
|
ts.isIdentifier(call.parent.left)
|
|
82
82
|
) {
|
|
83
|
-
|
|
83
|
+
varname = call.parent.left.text;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
if (
|
|
86
|
+
if (varname) {
|
|
87
87
|
let current = call.parent,
|
|
88
88
|
scope;
|
|
89
89
|
|
|
@@ -108,8 +108,8 @@ function visit(ctx: TransformContext, node: ts.Node): void {
|
|
|
108
108
|
scope = call.getSourceFile();
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
-
ctx.
|
|
112
|
-
ctx.
|
|
111
|
+
ctx.bindings.set(varname, classification);
|
|
112
|
+
ctx.scopedBindings.push({ name: varname, scope, type: classification });
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
// Replace just the 'reactive' identifier with the appropriate namespace function
|
package/accordion.js
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import * as reactivity_1ihsmodgjbfar0 from '@esportsplus/reactivity';
|
|
2
|
-
import { omit } from '@esportsplus/utilities';
|
|
3
|
-
import template from '../../components/template/index.js';
|
|
4
|
-
import './scss/index.scss';
|
|
5
|
-
class ReactiveObject_xy8kflxy8kfl2 extends reactivity_1ihsmodgjbfar0.ReactiveObject {
|
|
6
|
-
#active = this[reactivity_1ihsmodgjbfar0.SIGNAL](0);
|
|
7
|
-
constructor() {
|
|
8
|
-
super(null);
|
|
9
|
-
}
|
|
10
|
-
get active() {
|
|
11
|
-
return reactivity_1ihsmodgjbfar0.read(this.#active);
|
|
12
|
-
}
|
|
13
|
-
set active(_v0) {
|
|
14
|
-
reactivity_1ihsmodgjbfar0.write(this.#active, _v0);
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
const OMIT = ['state'];
|
|
18
|
-
let key = Symbol();
|
|
19
|
-
export default template.factory(function (attributes, content) {
|
|
20
|
-
let ref, state = attributes.state || reactivity_1ihsmodgjbfar0.reactive({
|
|
21
|
-
active: 0
|
|
22
|
-
}), n, html;
|
|
23
|
-
`
|
|
24
|
-
<div
|
|
25
|
-
${omit(attributes, OMIT)}
|
|
26
|
-
${{
|
|
27
|
-
class: () => {
|
|
28
|
-
return state.active && '--active';
|
|
29
|
-
},
|
|
30
|
-
onrender: (element) => {
|
|
31
|
-
(ref = element)[key] = state;
|
|
32
|
-
},
|
|
33
|
-
style: () => {
|
|
34
|
-
let parent = ref.closest('accordion');
|
|
35
|
-
if (parent && key in parent) {
|
|
36
|
-
parent[key].active = (+parent[key].active) + 1;
|
|
37
|
-
}
|
|
38
|
-
return state.active && `--max-height: ${ref.scrollHeight}`;
|
|
39
|
-
}
|
|
40
|
-
}}
|
|
41
|
-
>
|
|
42
|
-
${content}
|
|
43
|
-
</div>
|
|
44
|
-
`;
|
|
45
|
-
});
|
package/accordion.ts
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { reactive } from '@esportsplus/reactivity';
|
|
2
|
-
import { html, Attributes } from '@esportsplus/template';
|
|
3
|
-
import { omit } from '@esportsplus/utilities';
|
|
4
|
-
import template from '~/components/template';
|
|
5
|
-
import './scss/index.scss';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
type A = Attributes & { state?: { active: boolean | number } };
|
|
9
|
-
|
|
10
|
-
type Accordion = HTMLElement & { [key: symbol]: { active: boolean | number } };
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const OMIT = ['state'];
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
let key = Symbol();
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
export default template.factory(
|
|
20
|
-
function(attributes: A, content) {
|
|
21
|
-
let ref: Accordion,
|
|
22
|
-
state = attributes.state || reactive({
|
|
23
|
-
active: 0
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
return html`
|
|
27
|
-
<div
|
|
28
|
-
${omit(attributes, OMIT)}
|
|
29
|
-
${{
|
|
30
|
-
class: () => {
|
|
31
|
-
return state.active && '--active';
|
|
32
|
-
},
|
|
33
|
-
onrender: (element) => {
|
|
34
|
-
( ref = element as Accordion )[key] = state;
|
|
35
|
-
},
|
|
36
|
-
style: () => {
|
|
37
|
-
let parent = ref.closest<Accordion>('accordion');
|
|
38
|
-
|
|
39
|
-
if (parent && key in parent) {
|
|
40
|
-
parent[key].active = (+parent[key].active) + 1;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
return state.active && `--max-height: ${ref.scrollHeight}`;
|
|
44
|
-
}
|
|
45
|
-
}}
|
|
46
|
-
>
|
|
47
|
-
${content}
|
|
48
|
-
</div>
|
|
49
|
-
`;
|
|
50
|
-
}
|
|
51
|
-
);
|