@lvce-editor/component-state-worker 0.1.1 → 0.2.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/dist/componentStateWorkerMain.js +98 -39
- package/package.json +1 -1
|
@@ -54,6 +54,49 @@ class VError extends Error {
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
class AssertionError extends Error {
|
|
58
|
+
constructor(message) {
|
|
59
|
+
super(message);
|
|
60
|
+
this.name = 'AssertionError';
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
const Object$1 = 1;
|
|
64
|
+
const Number$1 = 2;
|
|
65
|
+
const Array$1 = 3;
|
|
66
|
+
const String$1 = 4;
|
|
67
|
+
const Boolean = 5;
|
|
68
|
+
const Function = 6;
|
|
69
|
+
const Null = 7;
|
|
70
|
+
const Unknown = 8;
|
|
71
|
+
const getType = value => {
|
|
72
|
+
switch (typeof value) {
|
|
73
|
+
case 'number':
|
|
74
|
+
return Number$1;
|
|
75
|
+
case 'function':
|
|
76
|
+
return Function;
|
|
77
|
+
case 'string':
|
|
78
|
+
return String$1;
|
|
79
|
+
case 'object':
|
|
80
|
+
if (value === null) {
|
|
81
|
+
return Null;
|
|
82
|
+
}
|
|
83
|
+
if (Array.isArray(value)) {
|
|
84
|
+
return Array$1;
|
|
85
|
+
}
|
|
86
|
+
return Object$1;
|
|
87
|
+
case 'boolean':
|
|
88
|
+
return Boolean;
|
|
89
|
+
default:
|
|
90
|
+
return Unknown;
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
const object = value => {
|
|
94
|
+
const type = getType(value);
|
|
95
|
+
if (type !== Object$1) {
|
|
96
|
+
throw new AssertionError('expected value to be of type object');
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
|
|
57
100
|
const isMessagePort = value => {
|
|
58
101
|
return value && value instanceof MessagePort;
|
|
59
102
|
};
|
|
@@ -967,6 +1010,9 @@ const {
|
|
|
967
1010
|
invoke,
|
|
968
1011
|
set: set$1
|
|
969
1012
|
} = create$2(RendererWorker);
|
|
1013
|
+
const getComponents = async () => {
|
|
1014
|
+
return invoke('ComponentState.getComponents');
|
|
1015
|
+
};
|
|
970
1016
|
|
|
971
1017
|
const toCommandId = key => {
|
|
972
1018
|
const dotIndex = key.indexOf('.');
|
|
@@ -1267,11 +1313,6 @@ const getUid = uri => {
|
|
|
1267
1313
|
};
|
|
1268
1314
|
const toUri = uid => `live-component-state:///${uid}.json`;
|
|
1269
1315
|
|
|
1270
|
-
const assertObject = value => {
|
|
1271
|
-
if (!value || typeof value !== 'object' || Array.isArray(value)) {
|
|
1272
|
-
throw new TypeError('Component state must be a JSON object');
|
|
1273
|
-
}
|
|
1274
|
-
};
|
|
1275
1316
|
const readFile = async uri => {
|
|
1276
1317
|
const uid = getUid(uri);
|
|
1277
1318
|
const state = await invoke('ComponentState.getState', uid);
|
|
@@ -1280,11 +1321,11 @@ const readFile = async uri => {
|
|
|
1280
1321
|
const writeFile = async (uri, content) => {
|
|
1281
1322
|
const uid = getUid(uri);
|
|
1282
1323
|
const state = JSON.parse(content);
|
|
1283
|
-
|
|
1324
|
+
object(state);
|
|
1284
1325
|
await invoke('ComponentState.setState', uid, state);
|
|
1285
1326
|
};
|
|
1286
1327
|
const readDirWithFileTypes = async () => {
|
|
1287
|
-
const components = await
|
|
1328
|
+
const components = await getComponents();
|
|
1288
1329
|
return components.filter(component => component.editable).map(component => ({
|
|
1289
1330
|
name: `${component.uid}.json`,
|
|
1290
1331
|
type: File
|
|
@@ -1293,7 +1334,7 @@ const readDirWithFileTypes = async () => {
|
|
|
1293
1334
|
const isReadonly = () => false;
|
|
1294
1335
|
const exists = async uri => {
|
|
1295
1336
|
const uid = getUid(uri);
|
|
1296
|
-
const components = await
|
|
1337
|
+
const components = await getComponents();
|
|
1297
1338
|
return components.some(component => component.uid === uid && component.editable);
|
|
1298
1339
|
};
|
|
1299
1340
|
|
|
@@ -1303,7 +1344,7 @@ const handleClick = async (state, uid) => {
|
|
|
1303
1344
|
};
|
|
1304
1345
|
|
|
1305
1346
|
const loadContent = async state => {
|
|
1306
|
-
const components = await
|
|
1347
|
+
const components = await getComponents();
|
|
1307
1348
|
return {
|
|
1308
1349
|
...state,
|
|
1309
1350
|
components,
|
|
@@ -1319,46 +1360,64 @@ const text = data => {
|
|
|
1319
1360
|
};
|
|
1320
1361
|
};
|
|
1321
1362
|
|
|
1363
|
+
const Card = 'ComponentStateCard';
|
|
1364
|
+
const CardStatus = 'ComponentStateCardStatus';
|
|
1365
|
+
const CardTitle = 'ComponentStateCardTitle';
|
|
1366
|
+
const CardUid = 'ComponentStateCardUid';
|
|
1367
|
+
const Description = 'ComponentStateDescription';
|
|
1368
|
+
const Grid = 'ComponentStateGrid';
|
|
1369
|
+
const Heading = 'ComponentStateHeading';
|
|
1370
|
+
const View = 'ComponentStateView';
|
|
1371
|
+
|
|
1372
|
+
const HandleClick = 1;
|
|
1373
|
+
|
|
1374
|
+
const titleNode = {
|
|
1375
|
+
childCount: 1,
|
|
1376
|
+
className: CardTitle,
|
|
1377
|
+
type: Strong
|
|
1378
|
+
};
|
|
1379
|
+
const uidNode = {
|
|
1380
|
+
childCount: 1,
|
|
1381
|
+
className: CardUid,
|
|
1382
|
+
type: Span
|
|
1383
|
+
};
|
|
1384
|
+
const statusNode = {
|
|
1385
|
+
childCount: 1,
|
|
1386
|
+
className: CardStatus,
|
|
1387
|
+
type: Span
|
|
1388
|
+
};
|
|
1322
1389
|
const getCard = component => {
|
|
1323
1390
|
const status = component.editable ? 'Open JSON state' : 'State API unavailable';
|
|
1324
1391
|
return [{
|
|
1325
1392
|
childCount: 3,
|
|
1326
|
-
className:
|
|
1393
|
+
className: Card,
|
|
1327
1394
|
'data-uid': String(component.uid),
|
|
1328
1395
|
disabled: !component.editable,
|
|
1329
|
-
onClick:
|
|
1396
|
+
onClick: HandleClick,
|
|
1330
1397
|
type: Button
|
|
1331
|
-
}, {
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1398
|
+
}, titleNode, text(component.moduleId), uidNode, text(`uid ${component.uid}`), statusNode, text(status)];
|
|
1399
|
+
};
|
|
1400
|
+
|
|
1401
|
+
const viewNode = {
|
|
1402
|
+
childCount: 3,
|
|
1403
|
+
className: View,
|
|
1404
|
+
type: Div
|
|
1405
|
+
};
|
|
1406
|
+
const headingNode = {
|
|
1407
|
+
childCount: 1,
|
|
1408
|
+
className: Heading,
|
|
1409
|
+
type: H2
|
|
1410
|
+
};
|
|
1411
|
+
const descriptionNode = {
|
|
1412
|
+
childCount: 1,
|
|
1413
|
+
className: Description,
|
|
1414
|
+
type: Div
|
|
1344
1415
|
};
|
|
1345
1416
|
const getComponentStateVirtualDom = (components, loaded) => {
|
|
1346
1417
|
const description = loaded ? `${components.length} live components` : 'Loading live components…';
|
|
1347
|
-
return [{
|
|
1348
|
-
childCount: 3,
|
|
1349
|
-
className: 'ComponentStateView',
|
|
1350
|
-
type: Div
|
|
1351
|
-
}, {
|
|
1352
|
-
childCount: 1,
|
|
1353
|
-
className: 'ComponentStateHeading',
|
|
1354
|
-
type: H2
|
|
1355
|
-
}, text('Live Component State'), {
|
|
1356
|
-
childCount: 1,
|
|
1357
|
-
className: 'ComponentStateDescription',
|
|
1358
|
-
type: Div
|
|
1359
|
-
}, text(description), {
|
|
1418
|
+
return [viewNode, headingNode, text('Live Component State'), descriptionNode, text(description), {
|
|
1360
1419
|
childCount: components.length,
|
|
1361
|
-
className:
|
|
1420
|
+
className: Grid,
|
|
1362
1421
|
type: Div
|
|
1363
1422
|
}, ...components.flatMap(getCard)];
|
|
1364
1423
|
};
|
|
@@ -1375,7 +1434,7 @@ const render2 = (uid, diffResult) => {
|
|
|
1375
1434
|
};
|
|
1376
1435
|
|
|
1377
1436
|
const renderEventListeners = () => [{
|
|
1378
|
-
name:
|
|
1437
|
+
name: HandleClick,
|
|
1379
1438
|
params: ['handleClick', 'event.currentTarget.dataset.uid'],
|
|
1380
1439
|
preventDefault: true
|
|
1381
1440
|
}];
|