Drop /widget/ from component paths (#132)

* landing page ref * remove /widget/ from component path
near · Nov 3, 2023 · 4d4e120 · 4d4e120
1 parent ecb21ea
commit 4d4e120
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 19 deletions.
diff --git a/apps/web/.env b/apps/web/.env
@@ -1 +1 @@
-NEXT_PUBLIC_DEFAULT_ROOT_COMPONENT=bwe-demos.near/widget/LandingPage
+NEXT_PUBLIC_DEFAULT_ROOT_COMPONENT=bwe-demos.near/LandingPage
diff --git a/apps/web/hooks/useWebEngine.ts b/apps/web/hooks/useWebEngine.ts
@@ -194,7 +194,7 @@ export function useWebEngine({
   useEffect(() => {
     setIsValidRootComponentPath(
       !!rootComponentPath &&
-        /^((([a-z\d]+[\-_])*[a-z\d]+\.)*([a-z\d]+[\-_])*[a-z\d]+)\/widget\/[\w.-]+$/gi.test(
+        /^((([a-z\d]+[\-_])*[a-z\d]+\.)*([a-z\d]+[\-_])*[a-z\d]+)\/[\w.-]+$/gi.test(
           rootComponentPath
         )
     );

diff --git a/components.md b/components.md
@@ -41,32 +41,32 @@ the loading policy via the `mode` property. The following modes are supported:
 ##### Sandboxed
 ```jsx
 {/* omitting the `trust` prop would have the same behavior */}
-<Widget trust={{ mode: "sandboxed" }} src="ex.near/widget/Parent" />
+<Widget trust={{ mode: "sandboxed" }} src="ex.near/Parent" />
 ```
 
 ##### Trusted
 ```jsx
-<Widget trust={{ mode: "trusted" }} src="ex.near/widget/Parent" />
+<Widget trust={{ mode: "trusted" }} src="ex.near/Parent" />
 ```
 
 ##### Trusted Author
 ```jsx
 {/* Root Component  */}
-<Widget trust={{ mode: "trusted-author" }} src="ex.near/widget/Parent" />
+<Widget trust={{ mode: "trusted-author" }} src="ex.near/Parent" />
 
 {/* Parent Component  */}
 <>
   {/* trusted: same author  */}
-  <Widget src="ex.near/widget/X" id="x-implicit" />
+  <Widget src="ex.near/X" id="x-implicit" />
 
   {/* trusted: same author, explicitly trusted; note that descendants of Y authored by ex.near will still be trusted */}
-  <Widget src="ex.near/widget/Y" trust={{ mode: "trusted" }} id="y" />
+  <Widget src="ex.near/Y" trust={{ mode: "trusted" }} id="y" />
 
   {/* sandboxed: explicitly sandboxed, same author behavior is overridden */}
-  <Widget src="ex.near/widget/X" trust={{ mode: "sandboxed" }} id="x-sandboxed" />
+  <Widget src="ex.near/X" trust={{ mode: "sandboxed" }} id="x-sandboxed" />
 
   {/* sandboxed: different author, no trust specified */}
-  <Widget src="mal.near/widget/X" id="x-mal" />
+  <Widget src="mal.near/X" id="x-mal" />
 </>
 ```
 
@@ -92,25 +92,25 @@ future.
 
 #### Examples
 
-Assume all code examples are from `ex.near/widget/Parent`:
+Assume all code examples are from `ex.near/Parent`:
 
 ```jsx
-<Widget src="ex.near/widget/Child" />
+<Widget src="ex.near/Child" />
 ```
 ✅
 The base ID is sufficient to identify a single child Component.
 
 ```jsx
-<Widget src="ex.near/widget/Child" />
-<Widget id="2nd" src="ex.near/widget/Child" />
+<Widget src="ex.near/Child" />
+<Widget id="2nd" src="ex.near/Child" />
 ```
 ✅
 The second Component has an explicit `id` value, preventing any collisions. While this does work, it would be much less brittle
 if both child Components had unique `id` values.
 
 ```jsx
-<Widget src="ex.near/widget/Child" />
-<Widget src="ex.near/widget/Child" />
+<Widget src="ex.near/Child" />
+<Widget src="ex.near/Child" />
 ```
 ❌ 
 Without unique `id` values, child Components cannot be differentiated by the outer application.
diff --git a/packages/compiler/src/parser.ts b/packages/compiler/src/parser.ts
@@ -1,7 +1,7 @@
 function parseWidgetRenders(transpiledComponent: string) {
   const functionOffset = 'createElement'.length;
   const componentRegex =
-    /createElement\(Widget,\s*\{(?:[\w\W]*?)(?:\s*src:\s*["|'](?<src>((([a-z\d]+[\-_])*[a-z\d]+\.)*([a-z\d]+[\-_])*[a-z\d]+)\/widget\/[\w.-]+))["|']/gi;
+    /createElement\(Widget,\s*\{(?:[\w\W]*?)(?:\s*src:\s*["|'](?<src>((([a-z\d]+[\-_])*[a-z\d]+\.)*([a-z\d]+[\-_])*[a-z\d]+)\/[\w.-]+))["|']/gi;
   return [...transpiledComponent.matchAll(componentRegex)].map((match) => {
     const openParenIndex = match.index! + functionOffset;
     let parenCount = 1;

diff --git a/packages/compiler/src/source.ts b/packages/compiler/src/source.ts
@@ -26,7 +26,9 @@ export function fetchComponentSources(
   return provider
     .query<CodeResult>({
       account_id: 'social.near',
-      args_base64: encodeComponentKeyArgs(componentPaths),
+      args_base64: encodeComponentKeyArgs(
+        componentPaths.map((p) => p.split('/').join('/widget/'))
+      ),
       finality: 'optimistic',
       method_name: 'get',
       request_type: 'call_function',
@@ -36,7 +38,7 @@ export function fetchComponentSources(
         (sources, [author, { widget: component }]) => {
           Object.entries(component).forEach(
             ([componentKey, componentSource]) => {
-              sources[`${author}/widget/${componentKey}`] = componentSource;
+              sources[`${author}/${componentKey}`] = componentSource;
             }
           );
           return sources;

diff --git a/packages/container/src/render.ts b/packages/container/src/render.ts
@@ -41,7 +41,7 @@ export const preactify: PreactifyCallback = ({
 
   // TODO handle other builtins
   const isComponent = !!props!.src?.match(
-    /[0-9a-z._-]{5,}\/widget\/[0-9a-z._-]+/gi
+    /[0-9a-z._-]{5,}\/[0-9a-z._-]+/gi
   );
   const { children } = props;
   if (!children) {