experimental: generate global system variable with CLI (#4885)

Here added support for generating global system variable with CLI. It's
not available yet in builder though.

Global system not presented in data but instead can be referenced with
`$ws$system` in expression instead of encoded id like
`$ws$dataSource$id`. Legacy page system variable will continue to work.

Author: TrySound

apps/builder/app/builder/features/address-bar.stories.tsx

@@ -61,7 +61,7 @@ $pages.set({
 const $selectedPageSystem = computed(
   [$selectedPage, $dataSourceVariables],
   (selectedPage, dataSourceVariables) => {
-    if (selectedPage === undefined) {
+    if (selectedPage?.systemDataSourceId === undefined) {
       return {};
     }
     return dataSourceVariables.get(selectedPage.systemDataSourceId);

apps/builder/app/builder/features/address-bar.tsx

@@ -65,7 +65,7 @@ const $selectedPagePath = computed([$selectedPage, $pages], (page, pages) => {
 const $selectedPagePathParams = computed(
   [$selectedPageDefaultSystem, $selectedPage, $dataSourceVariables],
   (defaultSystem, selectedPage, dataSourceVariables) => {
-    if (selectedPage === undefined) {
+    if (selectedPage?.systemDataSourceId === undefined) {
       return defaultSystem.params;
     }
     const system = dataSourceVariables.get(selectedPage.systemDataSourceId) as

apps/builder/app/builder/features/settings-panel/resource-panel.tsx

@@ -375,7 +375,7 @@ const $hiddenDataSourceIds = computed(
         dataSourceIds.add(dataSource.id);
       }
     }
-    if (page && isFeatureEnabled("filters")) {
+    if (page?.systemDataSourceId && isFeatureEnabled("filters")) {
       dataSourceIds.delete(page.systemDataSourceId);
     }
     return dataSourceIds;

apps/builder/app/canvas/interceptor.ts

@@ -27,7 +27,7 @@ const getSelectedPagePathname = () => {
   const pages = $pages.get();
   const page = $selectedPage.get();
   const dataSourceVariables = $dataSourceVariables.get();
-  if (page && pages) {
+  if (page?.systemDataSourceId && pages) {
     const system = dataSourceVariables.get(page.systemDataSourceId) as
       | undefined
       | System;

apps/builder/app/shared/nano-states/variables.ts

@@ -60,6 +60,9 @@ export const mergeSystem = (left: System, right?: System): System => {
 };
 
 export const updateSystem = (page: Page, update: Partial<System>) => {
+  if (page.systemDataSourceId === undefined) {
+    return;
+  }
   const dataSourceVariables = new Map($dataSourceVariables.get());
   const system = dataSourceVariables.get(page.systemDataSourceId) as
     | undefined

apps/builder/app/shared/page-utils.ts

@@ -118,7 +118,8 @@ export const insertPageCopyMutable = ({
   const newRootInstanceId =
     newInstanceIds.get(page.rootInstanceId) ?? page.rootInstanceId;
   const newSystemDataSourceId =
-    newDataSourceIds.get(page.systemDataSourceId) ?? page.systemDataSourceId;
+    newDataSourceIds.get(page.systemDataSourceId ?? "") ??
+    page.systemDataSourceId;
   const newPage: Page = {
     ...page,
     id: newPageId,