From 4d4e1201bc54bd878649b0efdc311e0aa8151d26 Mon Sep 17 00:00:00 2001
From: Michael Peter <hi@mpeter.us>
Date: Fri, 3 Nov 2023 14:03:51 -0400
Subject: [PATCH] Drop `/widget/` from component paths (#132)

* landing page ref

* remove /widget/ from component path
---
 apps/web/.env                    |  2 +-
 apps/web/hooks/useWebEngine.ts   |  2 +-
 components.md                    | 26 +++++++++++++-------------
 packages/compiler/src/parser.ts  |  2 +-
 packages/compiler/src/source.ts  |  6 ++++--
 packages/container/src/render.ts |  2 +-
 6 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/apps/web/.env b/apps/web/.env
index 37461aa9..80270b7f 100644
--- a/apps/web/.env
+++ b/apps/web/.env
@@ -1 +1 @@
-NEXT_PUBLIC_DEFAULT_ROOT_COMPONENT=bwe-demos.near/widget/LandingPage
\ No newline at end of file
+NEXT_PUBLIC_DEFAULT_ROOT_COMPONENT=bwe-demos.near/LandingPage
\ No newline at end of file
diff --git a/apps/web/hooks/useWebEngine.ts b/apps/web/hooks/useWebEngine.ts
index aff96158..ea3b3c32 100644
--- 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
index 25cb0043..e477b75f 100644
--- 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
index 3967a217..5274e7ea 100644
--- 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
index 135be2bf..69b38280 100644
--- 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
index 81080917..f3fc6a49 100644
--- 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) {