@nordcraft/runtime 1.0.33 → 1.0.35

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.
Files changed (40) hide show
  1. package/dist/components/createComponent.js +4 -0
  2. package/dist/components/createComponent.js.map +1 -1
  3. package/dist/components/createElement.js +9 -1
  4. package/dist/components/createElement.js.map +1 -1
  5. package/dist/components/createNode.js +3 -3
  6. package/dist/components/createNode.js.map +1 -1
  7. package/dist/custom-element.main.esm.js +17 -17
  8. package/dist/custom-element.main.esm.js.map +4 -4
  9. package/dist/debug/panicScreen.d.ts +6 -0
  10. package/dist/debug/panicScreen.js +25 -0
  11. package/dist/debug/panicScreen.js.map +1 -0
  12. package/dist/debug/sendEditorToast.d.ts +3 -0
  13. package/dist/debug/sendEditorToast.js +9 -0
  14. package/dist/debug/sendEditorToast.js.map +1 -0
  15. package/dist/editor/graphql.d.ts +12 -0
  16. package/dist/editor/graphql.js +150 -0
  17. package/dist/editor/graphql.js.map +1 -0
  18. package/dist/editor-preview.main.js +142 -71
  19. package/dist/editor-preview.main.js.map +1 -1
  20. package/dist/page.main.esm.js +3 -3
  21. package/dist/page.main.esm.js.map +4 -4
  22. package/dist/styles/CustomPropertyStyleSheet.d.ts +2 -1
  23. package/dist/styles/CustomPropertyStyleSheet.js +14 -5
  24. package/dist/styles/CustomPropertyStyleSheet.js.map +1 -1
  25. package/dist/styles/CustomPropertyStyleSheet.test.js +7 -7
  26. package/dist/styles/CustomPropertyStyleSheet.test.js.map +1 -1
  27. package/dist/utils/subscribeCustomProperty.d.ts +4 -1
  28. package/dist/utils/subscribeCustomProperty.js +11 -4
  29. package/dist/utils/subscribeCustomProperty.js.map +1 -1
  30. package/package.json +3 -3
  31. package/src/components/createComponent.ts +4 -0
  32. package/src/components/createElement.ts +10 -1
  33. package/src/components/createNode.ts +3 -3
  34. package/src/debug/panicScreen.ts +37 -0
  35. package/src/debug/sendEditorToast.ts +19 -0
  36. package/src/editor/graphql.ts +167 -0
  37. package/src/editor-preview.main.ts +319 -215
  38. package/src/styles/CustomPropertyStyleSheet.test.ts +7 -7
  39. package/src/styles/CustomPropertyStyleSheet.ts +22 -5
  40. package/src/utils/subscribeCustomProperty.ts +25 -12
@@ -0,0 +1,6 @@
1
+ export declare const createPanicScreen: ({ name, message, isPage, cause, }: {
2
+ name: string;
3
+ message: string;
4
+ isPage?: boolean;
5
+ cause?: unknown;
6
+ }) => DocumentFragment;
@@ -0,0 +1,25 @@
1
+ export const createPanicScreen = ({ name, message, isPage, cause, }) => {
2
+ let content = getContent(name, message, isPage);
3
+ // Easter egg for RangeError
4
+ if (cause instanceof RangeError) {
5
+ for (let i = 0; i < 10; i++) {
6
+ content += `<div style="transform-origin: 15% 15%; scale: ${1 / (i * 0.225 + 1.225)}; font-size: ${22 / ((i * 0.6) ** 2 + 1)}px">${getContent(name, message, isPage)}</div>`;
7
+ }
8
+ }
9
+ return document.createRange().createContextualFragment(`
10
+ <main style="background-color: blue; color: white; font-family: 'Courier New', monospace; font-weight: 100; display: flex; justify-content: flex-start; align-items: flex-start; margin: 0px; padding: 0px;">
11
+ <div style="display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 100vh;">
12
+ <div style="display: flex; flex-direction: column; gap: 20px; padding: 80px; font-size: 22px;">
13
+ ${content}
14
+ </div>
15
+ </div>
16
+ <div style="position:fixed; pointer-events: none; width: 100vw; height: 100vh; background-image: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.33) 25%, rgba(0,0,0,0.33) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.33) 75%, rgba(0,0,0,0.33) 100%); background-size: 4px 4px;"></div>
17
+ <div style="position:fixed; pointer-events: none; width: 100vw; height: 100vh; background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 100%);"></div>
18
+ </main>
19
+ `);
20
+ };
21
+ const getContent = (name, message, isPage) => `
22
+ <h1 style="display: inline; font-size: 1em; background: white; color: blue; padding: 0.4em 0.8em;">${name}</h1>
23
+ <p style="font-size: 0.8em;">The ${isPage ? 'page' : 'component'} could not be rendered. Fix the issue and try again. Join our <a style="color:white" href="https://discord.gg/nordcraft" target="_blank">Discord</a> for help.</p>
24
+ <p style="font-size: 0.81em;">Error Message: ${message}</p>`;
25
+ //# sourceMappingURL=panicScreen.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"panicScreen.js","sourceRoot":"","sources":["../../src/debug/panicScreen.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,MAAM,EACN,KAAK,GAMN,EAAE,EAAE;IACH,IAAI,OAAO,GAAG,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;IAE/C,4BAA4B;IAC5B,IAAI,KAAK,YAAY,UAAU,EAAE,CAAC;QAChC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,OAAO,IAAI,iDAAiD,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,CAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAA;QAC9K,CAAC;IACH,CAAC;IAED,OAAO,QAAQ,CAAC,WAAW,EAAE,CAAC,wBAAwB,CAAC;;;;cAI3C,OAAO;;;;;;GAMlB,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,OAAe,EAAE,MAAgB,EAAE,EAAE,CAAC;uGAC+B,IAAI;qCACtE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW;iDACjB,OAAO,MAAM,CAAA"}
@@ -0,0 +1,3 @@
1
+ export declare function sendEditorToast(title: string, message: string, { type, }: {
2
+ type?: 'neutral' | 'warning' | 'critical';
3
+ }): void;
@@ -0,0 +1,9 @@
1
+ export function sendEditorToast(title, message, { type = 'neutral', }) {
2
+ window.parent?.postMessage({
3
+ type: 'emitToast',
4
+ toastType: type,
5
+ title,
6
+ message,
7
+ }, '*');
8
+ }
9
+ //# sourceMappingURL=sendEditorToast.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sendEditorToast.js","sourceRoot":"","sources":["../../src/debug/sendEditorToast.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe,CAC7B,KAAa,EACb,OAAe,EACf,EACE,IAAI,GAAG,SAAS,GAGjB;IAED,MAAM,CAAC,MAAM,EAAE,WAAW,CACxB;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;QACf,KAAK;QACL,OAAO;KACR,EACD,GAAG,CACJ,CAAA;AACH,CAAC"}
@@ -0,0 +1,12 @@
1
+ import { type ApiRequest } from '@nordcraft/core/dist/api/apiTypes';
2
+ import type { FormulaContext } from '@nordcraft/core/dist/formula/formula';
3
+ /**
4
+ * Run an introspection query for an existing API
5
+ * The introspection will usually be a POST request, but we use the method
6
+ * from the original API to support other methods.
7
+ */
8
+ export declare const introspectApiRequest: ({ api, componentName, formulaContext, }: {
9
+ api: ApiRequest;
10
+ componentName: string;
11
+ formulaContext: FormulaContext;
12
+ }) => Promise<any>;
@@ -0,0 +1,150 @@
1
+ import { createApiRequest, HttpMethodsWithAllowedBody, } from '@nordcraft/core/dist/api/api';
2
+ import { ApiMethod } from '@nordcraft/core/dist/api/apiTypes';
3
+ import { PROXY_URL_HEADER } from '@nordcraft/core/dist/utils/url';
4
+ const INTROSPECTION_QUERY = `\
5
+ query IntrospectionQuery {
6
+ __schema {
7
+ queryType { ...FullType }
8
+ mutationType { ...FullType }
9
+ subscriptionType { ...FullType }
10
+ types {
11
+ ...FullType
12
+ }
13
+ directives {
14
+ name
15
+ description
16
+ locations
17
+ args {
18
+ ...InputValue
19
+ }
20
+ }
21
+ }
22
+ }
23
+ fragment FullType on __Type {
24
+ kind
25
+ name
26
+ description
27
+ fields(includeDeprecated: true) {
28
+ name
29
+ description
30
+ args {
31
+ ...InputValue
32
+ }
33
+ type {
34
+ ...TypeRef
35
+ }
36
+ isDeprecated
37
+ deprecationReason
38
+ }
39
+ inputFields {
40
+ ...InputValue
41
+ }
42
+ interfaces {
43
+ ...TypeRef
44
+ }
45
+ enumValues(includeDeprecated: true) {
46
+ name
47
+ description
48
+ isDeprecated
49
+ deprecationReason
50
+ }
51
+ possibleTypes {
52
+ ...TypeRef
53
+ }
54
+ }
55
+ fragment InputValue on __InputValue {
56
+ name
57
+ description
58
+ type { ...TypeRef }
59
+ defaultValue
60
+ }
61
+ fragment TypeRef on __Type {
62
+ kind
63
+ name
64
+ ofType {
65
+ kind
66
+ name
67
+ ofType {
68
+ kind
69
+ name
70
+ ofType {
71
+ kind
72
+ name
73
+ ofType {
74
+ kind
75
+ name
76
+ ofType {
77
+ kind
78
+ name
79
+ ofType {
80
+ kind
81
+ name
82
+ ofType {
83
+ kind
84
+ name
85
+ }
86
+ }
87
+ }
88
+ }
89
+ }
90
+ }
91
+ }
92
+ }`;
93
+ /**
94
+ * Run an introspection query for an existing API
95
+ * The introspection will usually be a POST request, but we use the method
96
+ * from the original API to support other methods.
97
+ */
98
+ export const introspectApiRequest = async ({ api, componentName, formulaContext, }) => {
99
+ const { url, requestSettings } = createApiRequest({
100
+ api: {
101
+ ...api,
102
+ // Default to a POST request if the method of the original API doesn't support a body
103
+ // The introspection query should never be initiated in that case though
104
+ method: HttpMethodsWithAllowedBody.includes(api.method ?? ApiMethod.POST)
105
+ ? api.method
106
+ : ApiMethod.POST,
107
+ // Overwrite the body with a default introspection query (in a value formula)
108
+ body: {
109
+ type: 'value',
110
+ value: { query: INTROSPECTION_QUERY },
111
+ },
112
+ },
113
+ baseUrl: window.origin,
114
+ defaultHeaders: undefined,
115
+ formulaContext,
116
+ });
117
+ // We must proxy to be able to include cookies
118
+ const proxyUrl = `/.toddle/omvej/components/${encodeURIComponent(componentName)}/apis/${encodeURIComponent(componentName)}:${encodeURIComponent(api.name)}`;
119
+ const headers = new Headers(requestSettings.headers);
120
+ headers.set(PROXY_URL_HEADER, decodeURIComponent(url.href.replace(/\+/g, ' ')));
121
+ requestSettings.headers = headers;
122
+ const response = await fetch(proxyUrl, {
123
+ ...requestSettings,
124
+ // Set credentials to what was set on the original API
125
+ credentials: api.client?.credentials &&
126
+ ['include', 'same-origin', 'omit'].includes(api.client.credentials)
127
+ ? api.client.credentials
128
+ : // Default to same-origin
129
+ undefined,
130
+ });
131
+ try {
132
+ const data = await response.json();
133
+ if (response.ok) {
134
+ return data;
135
+ }
136
+ else {
137
+ // eslint-disable-next-line no-console
138
+ console.error('Failed to introspect API:', api.name, data);
139
+ // Return a generic error message if introspection failed
140
+ return { error: data?.message ?? 'Failed to parse introspection result' };
141
+ }
142
+ }
143
+ catch (e) {
144
+ // eslint-disable-next-line no-console
145
+ console.error('Failed to parses API response:', api.name, e);
146
+ // Return a generic error message if introspection failed
147
+ return { error: `Failed to introspect API: ${api.name}` };
148
+ }
149
+ };
150
+ //# sourceMappingURL=graphql.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"graphql.js","sourceRoot":"","sources":["../../src/editor/graphql.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,0BAA0B,GAC3B,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,SAAS,EAAmB,MAAM,mCAAmC,CAAA;AAE9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AAEjE,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwF1B,CAAA;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,EAAE,EACzC,GAAG,EACH,aAAa,EACb,cAAc,GAKf,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,eAAe,EAAE,GAAG,gBAAgB,CAAC;QAChD,GAAG,EAAE;YACH,GAAI,GAAkB;YACtB,qFAAqF;YACrF,wEAAwE;YACxE,MAAM,EAAE,0BAA0B,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,IAAI,SAAS,CAAC,IAAI,CAAC;gBACvE,CAAC,CAAC,GAAG,CAAC,MAAM;gBACZ,CAAC,CAAC,SAAS,CAAC,IAAI;YAClB,6EAA6E;YAC7E,IAAI,EAAE;gBACJ,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE;aACtC;SACF;QACD,OAAO,EAAE,MAAM,CAAC,MAAM;QACtB,cAAc,EAAE,SAAS;QACzB,cAAc;KACf,CAAC,CAAA;IACF,8CAA8C;IAC9C,MAAM,QAAQ,GAAG,6BAA6B,kBAAkB,CAC9D,aAAa,CACd,SAAS,kBAAkB,CAAC,aAAa,CAAC,IAAI,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAA;IAC7E,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC,eAAe,CAAC,OAAO,CAAC,CAAA;IACpD,OAAO,CAAC,GAAG,CACT,gBAAgB,EAChB,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CACjD,CAAA;IACD,eAAe,CAAC,OAAO,GAAG,OAAO,CAAA;IACjC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE;QACrC,GAAG,eAAe;QAClB,sDAAsD;QACtD,WAAW,EACT,GAAG,CAAC,MAAM,EAAE,WAAW;YACvB,CAAC,SAAS,EAAE,aAAa,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC;YACjE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,WAAW;YACxB,CAAC,CAAC,yBAAyB;gBACzB,SAAS;KAChB,CAAC,CAAA;IACF,IAAI,CAAC;QACH,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;QAClC,IAAI,QAAQ,CAAC,EAAE,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA;QACb,CAAC;aAAM,CAAC;YACN,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;YAC1D,yDAAyD;YACzD,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,IAAI,sCAAsC,EAAE,CAAA;QAC3E,CAAC;IACH,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,gCAAgC,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;QAC5D,yDAAyD;QACzD,OAAO,EAAE,KAAK,EAAE,6BAA6B,GAAG,CAAC,IAAI,EAAE,EAAE,CAAA;IAC3D,CAAC;AACH,CAAC,CAAA"}