npm - @platformos/platformos-graph - Versions diffs - 0.0.7 → 0.0.9 - Mend

@platformos/platformos-graph 0.0.7 → 0.0.9

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 (65) hide show

package/CHANGELOG.md +18 -0
package/README.md +10 -11
package/dist/getWebComponentMap.js +1 -1
package/dist/getWebComponentMap.js.map +1 -1
package/dist/graph/augment.js +0 -3
package/dist/graph/augment.js.map +1 -1
package/dist/graph/build.d.ts +2 -2
package/dist/graph/build.js +7 -8
package/dist/graph/build.js.map +1 -1
package/dist/graph/module.d.ts +6 -9
package/dist/graph/module.js +54 -123
package/dist/graph/module.js.map +1 -1
package/dist/graph/serialize.d.ts +2 -2
package/dist/graph/serialize.js +2 -2
package/dist/graph/serialize.js.map +1 -1
package/dist/graph/test-helpers.d.ts +0 -13
package/dist/graph/test-helpers.js +0 -10
package/dist/graph/test-helpers.js.map +1 -1
package/dist/graph/traverse.d.ts +3 -3
package/dist/graph/traverse.js +19 -349
package/dist/graph/traverse.js.map +1 -1
package/dist/index.d.ts +3 -3
package/dist/index.js +4 -6
package/dist/index.js.map +1 -1
package/dist/toSourceCode.d.ts +1 -4
package/dist/toSourceCode.js +8 -52
package/dist/toSourceCode.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/dist/types.d.ts +21 -78
package/dist/types.js.map +1 -1
package/dist/utils/index.d.ts +0 -3
package/dist/utils/index.js +0 -18
package/dist/utils/index.js.map +1 -1
package/docs/how-it-works.md +9 -10
package/fixtures/skeleton/app/views/layouts/application.liquid +13 -0
package/fixtures/skeleton/app/views/pages/index.liquid +5 -0
package/fixtures/skeleton/app/views/partials/header.liquid +3 -0
package/fixtures/skeleton/app/views/partials/parent.liquid +1 -1
package/package.json +5 -5
package/src/getWebComponentMap.ts +1 -1
package/src/graph/augment.ts +1 -13
package/src/graph/build.spec.ts +33 -173
package/src/graph/build.ts +11 -14
package/src/graph/module.ts +60 -144
package/src/graph/serialize.spec.ts +22 -29
package/src/graph/serialize.ts +2 -2
package/src/graph/test-helpers.ts +1 -18
package/src/graph/traverse.ts +31 -504
package/src/index.ts +3 -3
package/src/toSourceCode.ts +14 -55
package/src/types.ts +23 -100
package/src/utils/index.ts +0 -24
package/fixtures/skeleton/blocks/_private.liquid +0 -1
package/fixtures/skeleton/blocks/_static.liquid +0 -10
package/fixtures/skeleton/blocks/group.liquid +0 -27
package/fixtures/skeleton/blocks/render-static.liquid +0 -22
package/fixtures/skeleton/blocks/text.liquid +0 -14
package/fixtures/skeleton/jsconfig.json +0 -9
package/fixtures/skeleton/layout/theme.liquid +0 -14
package/fixtures/skeleton/sections/custom-section.liquid +0 -6
package/fixtures/skeleton/sections/header-group.json +0 -36
package/fixtures/skeleton/sections/header.liquid +0 -1
package/fixtures/skeleton/templates/index.json +0 -20
/package/fixtures/skeleton/assets/{theme.css → app.css} +0 -0
/package/fixtures/skeleton/assets/{theme.js → app.js} +0 -0

package/docs/how-it-works.md CHANGED Viewed

@@ -8,7 +8,7 @@
 ## What it looks like
-A theme graph looks a bit like this:
+An app graph looks a bit like this:
 ![Graph](./graph.png)
@@ -18,15 +18,15 @@ It's a web of modules and links between them.
 A **Graph** is a set of Nodes and Edges.
-A **Theme Graph** is a set of *Modules* (nodes) and *References* (edges) defined by an array of *Entry Points*. It has these properties:
-- `rootUri` - root of the theme, e.g. `file:/path/to/theme`
-- `entryPoints` - array of modules that define the theme (all templates and sections)
-- `modules` - all the modules in the theme indexed by URI
+An **App Graph** is a set of *Modules* (nodes) and *References* (edges) defined by an array of *Entry Points*. It has these properties:
+- `rootUri` - root of the app, e.g. `file:/path/to/app`
+- `entryPoints` - array of modules that define the app (pages and layouts)
+- `modules` - all the modules in the app indexed by URI
-A **Module** is an object that represents a theme file. It has these properties:
-- `uri` - module identifier, e.g. `file:/path/to/theme/snippets/file.liquid`
+A **Module** is an object that represents an app file. It has these properties:
+- `uri` - module identifier, e.g. `file:/path/to/app/views/partials/file.liquid`
 - `type` - e.g. `liquid`, `json`, `javascript`, `css`.
-- `kind` - e.g. `block`, `section`, `snippet`, `template`, etc.
+- `kind` - e.g. `layout`, `partial`, `page`.
 - `references` - array of *References* that point to this module.
 - `dependencies` - array of *References* that this module depends on.
@@ -35,8 +35,7 @@ A **Reference** is an object that defines a link between two modules. It has the
 - `target` - a `uri` and `range` that defines which module is being dependended on and optionally what is being depended on in that file,
 - `type` - one of the following:
   - `direct` - the file can't exist without the other, e.g. `{% render 'child' %}`
-  - `preset` - the file has a preset that depends on an other file, e.g. a section that has a preset that includes `group` and `text` blocks.
-  - `indirect` - the file loosely depends on the other, but not explicilty. e.g. when a file accepts all public theme blocks (`"type": "@theme"`))
+  - `indirect` - the file loosely depends on the other, but not explicitly.
 ## Algorithm overview

package/fixtures/skeleton/app/views/layouts/application.liquid ADDED Viewed

@@ -0,0 +1,13 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script type="module" src="{{ 'app.js' | asset_url }}"></script>
+    <link rel="stylesheet" href="{{ 'app.css' | asset_url }}">
+  </head>
+  <body>
+    {% render 'header' %}
+    {% yield %}
+  </body>
+</html>

package/fixtures/skeleton/app/views/pages/index.liquid ADDED Viewed

@@ -0,0 +1,5 @@
+---
+slug: index
+layout: application
+---
+{% render "parent", children: "hello" %}

package/fixtures/skeleton/app/views/partials/header.liquid ADDED Viewed

@@ -0,0 +1,3 @@
+<header>
+  {% render "child", children: "nav" %}
+</header>

package/fixtures/skeleton/app/views/partials/parent.liquid CHANGED Viewed

@@ -1,5 +1,5 @@
 {% doc %}
-  Parent snippet that renders the children and depends on the parent-element custom element
+  Parent partial that renders the children and depends on the parent-element custom element
   @param {string} children
 {% enddoc %}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@platformos/platformos-graph",
-  "version": "0.0.7",
-  "description": "Shopify Theme Graph as a data structure",
+  "version": "0.0.9",
+  "description": "platformOS App Graph as a data structure",
   "author": "platformOS",
   "homepage": "https://github.com/Platform-OS/platformos-tools/tree/master/packages/platformos-graph#readme",
   "repository": {
@@ -29,13 +29,13 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@platformos/liquid-html-parser": "^0.0.7",
-    "@platformos/platformos-check-common": "0.0.7",
+    "@platformos/liquid-html-parser": "^0.0.9",
+    "@platformos/platformos-check-common": "0.0.9",
     "acorn": "^8.16.0",
     "acorn-walk": "^8.3.5",
     "vscode-uri": "^3.1.0"
   },
   "devDependencies": {
-    "@platformos/platformos-check-node": "0.0.7"
+    "@platformos/platformos-check-node": "0.0.9"
   }
 }

package/src/getWebComponentMap.ts CHANGED Viewed

@@ -46,7 +46,7 @@ export async function findWebComponentReferences(
   result: WebComponentMap,
 ): Promise<Void> {
   const sourceCode = await getSourceCode(uri);
-  if (sourceCode.type !== 'javascript') {
+  if (!uri.endsWith('.js')) {
     return;
   }

package/src/graph/augment.ts CHANGED Viewed

@@ -1,9 +1,4 @@
-import {
-  memoize,
-  memo,
-  recursiveReadDirectory as findAllFiles,
-  path,
-} from '@platformos/platformos-check-common';
+import { memoize, path } from '@platformos/platformos-check-common';
 import { toSourceCode } from '../toSourceCode';
 import { AugmentedDependencies, IDependencies } from '../types';
 import { identity } from '../utils';
@@ -11,8 +6,6 @@ import { identity } from '../utils';
 export function augmentDependencies(rootUri: string, ideps: IDependencies): AugmentedDependencies {
   return {
     fs: ideps.fs,
-    getBlockSchema: memoize(ideps.getBlockSchema, identity),
-    getSectionSchema: memoize(ideps.getSectionSchema, identity),
     // parse at most once
     getSourceCode: memoize(
@@ -25,10 +18,5 @@ export function augmentDependencies(rootUri: string, ideps: IDependencies): Augm
     ),
     getWebComponentDefinitionReference: ideps.getWebComponentDefinitionReference,
-    getThemeBlockNames: memo(() =>
-      findAllFiles(ideps.fs, path.join(rootUri, 'blocks'), ([uri]) => uri.endsWith('.liquid')).then(
-        (uris) => uris.map((uri) => path.basename(uri, '.liquid')),
-      ),
-    ),
   };
 }

package/src/graph/build.spec.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { path as pathUtils, SourceCodeType } from '@platformos/platformos-check-common';
 import { assert, beforeAll, beforeEach, describe, expect, it } from 'vitest';
-import { buildThemeGraph } from '../index';
-import { Dependencies, JsonModuleKind, LiquidModuleKind, ModuleType, ThemeGraph } from '../types';
+import { buildAppGraph } from '../index';
+import { Dependencies, LiquidModuleKind, ModuleType, AppGraph } from '../types';
 import { getDependencies, skeleton } from './test-helpers';
 describe('Module: index', () => {
@@ -14,162 +14,51 @@ describe('Module: index', () => {
     dependencies = await getDependencies(rootUri);
   }, 15000);
-  describe('Unit: buildThemeGraph', { timeout: 10000 }, () => {
-    it('build a graph of the theme', { timeout: 10000 }, async () => {
-      const graph = await buildThemeGraph(rootUri, dependencies);
+  describe('Unit: buildAppGraph', { timeout: 10000 }, () => {
+    it('builds a graph of the app', { timeout: 10000 }, async () => {
+      const graph = await buildAppGraph(rootUri, dependencies);
       expect(graph).toBeDefined();
     });
-    describe('with a valid theme graph', () => {
-      let graph: ThemeGraph;
+    describe('with a valid app graph', () => {
+      let graph: AppGraph;
       beforeEach(async () => {
-        graph = await buildThemeGraph(rootUri, dependencies);
+        graph = await buildAppGraph(rootUri, dependencies);
       });
-      it('have a root URI', () => {
+      it('has a root URI', () => {
         expect(graph.rootUri).toBeDefined();
         expect(graph.rootUri).toBe(rootUri);
       });
-      // We're using sections as entry points because the section rendering API can render
-      // any section without it needing a preset or default value in its schema.
-      it('infers entry points from the templates folder and section files', () => {
-        expect(graph.entryPoints).toHaveLength(3);
+      it('infers entry points from layouts and pages', () => {
+        expect(graph.entryPoints).toHaveLength(2);
         expect(graph.entryPoints.map((x) => x.uri)).toEqual(
           expect.arrayContaining([
-            p('templates/index.json'),
-            p('sections/custom-section.liquid'),
-            p('sections/header.liquid'),
+            p('app/views/layouts/application.liquid'),
+            p('app/views/pages/index.liquid'),
           ]),
         );
       });
-      it("finds layout/theme.liquid's dependencies and references", () => {
-        const themeLayout = graph.modules[p('layout/theme.liquid')];
-        assert(themeLayout);
+      it("finds app/views/layouts/application.liquid's dependencies", () => {
+        const layout = graph.modules[p('app/views/layouts/application.liquid')];
+        assert(layout);
+        assert(layout.type === ModuleType.Liquid);
+        assert(layout.kind === LiquidModuleKind.Layout);
-        // outgoing links
-        const deps = themeLayout.dependencies;
-        assert(deps.map((x) => x.source.uri).every((x) => x === p('layout/theme.liquid')));
-        expect(deps.map((x) => x.target.uri)).toEqual(
-          expect.arrayContaining([
-            p('sections/header-group.json'),
-            p('assets/theme.js'),
-            p('assets/theme.css'),
-          ]),
-        );
-        // ingoing links
-        const refs = themeLayout.references;
-        expect(refs).toHaveLength(1);
-        assert(refs.map((x) => x.target.uri).every((x) => x === p('layout/theme.liquid')));
-        expect(refs.map((x) => x.source.uri)).toEqual(
-          expect.arrayContaining([p('templates/index.json')]),
-        );
-      });
-      it("finds templates/index.json's dependencies and references", () => {
-        const indexTemplate = graph.modules[p('templates/index.json')];
-        assert(indexTemplate);
-        assert(indexTemplate.type === ModuleType.Json);
-        assert(indexTemplate.kind === JsonModuleKind.Template);
-        // outgoing links
-        const deps = indexTemplate.dependencies;
-        assert(deps.map((x) => x.source.uri).every((x) => x === p('templates/index.json')));
-        expect(deps.map((x) => x.target.uri)).toEqual(
-          expect.arrayContaining([
-            p('layout/theme.liquid'),
-            p('sections/custom-section.liquid'),
-            p('blocks/group.liquid'),
-            p('blocks/text.liquid'),
-          ]),
-        );
-        // ingoing links
-        const refs = indexTemplate.references;
-        expect(refs).toHaveLength(0);
-      });
-      it("finds sections/custom-section's dependencies and references", () => {
-        const customSection = graph.modules[p('sections/custom-section.liquid')];
-        assert(customSection);
-        assert(customSection.type === ModuleType.Liquid);
-        assert(customSection.kind === LiquidModuleKind.Section);
-        // outgoing links
-        const deps = customSection.dependencies;
-        assert(deps.map((x) => x.source.uri).every((x) => x === customSection.uri));
+        const deps = layout.dependencies;
         expect(deps.map((x) => x.target.uri)).toEqual(
           expect.arrayContaining([
-            p('blocks/group.liquid'),
-            p('blocks/text.liquid'),
-            p('blocks/_private.liquid'),
-          ]),
-        );
-        // ingoing links
-        const refs = customSection.references;
-        assert(refs.map((x) => x.target.uri).every((x) => x === customSection.uri));
-        expect(refs.map((x) => x.source.uri)).toEqual(
-          expect.arrayContaining([p('templates/index.json'), p('sections/header-group.json')]),
-        );
-        expect(refs).toHaveLength(2);
-      });
-      it("finds blocks/group's dependencies and references", () => {
-        const groupBlock = graph.modules[p('blocks/group.liquid')];
-        assert(groupBlock);
-        assert(groupBlock.type === ModuleType.Liquid);
-        assert(groupBlock.kind === LiquidModuleKind.Block);
-        const deps = groupBlock.dependencies;
-        assert(deps.map((x) => x.source.uri).every((x) => x === groupBlock.uri));
-        expect(deps).toEqual(
-          expect.arrayContaining([
-            {
-              source: loc('blocks/group.liquid'),
-              target: loc('app/views/partials/parent.liquid'),
-              type: 'direct',
-            }, // direct dep in partial
-            {
-              source: loc('blocks/group.liquid'),
-              target: loc('blocks/text.liquid'),
-              type: 'indirect',
-            }, // indirect because of @theme
-            {
-              source: loc('blocks/group.liquid'),
-              target: loc('blocks/text.liquid'),
-              type: 'preset',
-            }, // direct dep in preset
-          ]),
-        );
-        const refs = groupBlock.references;
-        assert(refs.map((x) => x.target.uri).every((x) => x === groupBlock.uri));
-        expect(refs.map((x) => x.source.uri)).toEqual(
-          expect.arrayContaining([
-            p('templates/index.json'),
-            p('sections/custom-section.liquid'), // @theme ref
-            p('sections/header-group.json'), // custom-section > group
-            p('blocks/group.liquid'), // @theme ref
+            p('assets/app.js'),
+            p('assets/app.css'),
+            p('app/views/partials/header.liquid'),
           ]),
         );
-        expect(refs).toContainEqual(
-          // Expecting the `@theme` reference in the custom-section schema to be indirect
-          expect.objectContaining({
-            type: 'indirect',
-            source: {
-              uri: p('sections/custom-section.liquid'),
-              range: [expect.any(Number), expect.any(Number)],
-            },
-          }),
-        );
       });
-      it("finds the app/views/partials/parent's dependencies and references", async () => {
+      it("finds app/views/partials/parent's dependencies and references", async () => {
         const parentPartial = graph.modules[p('app/views/partials/parent.liquid')];
         assert(parentPartial);
         assert(parentPartial.type === ModuleType.Liquid);
@@ -179,22 +68,10 @@ describe('Module: index', () => {
         const deps = parentPartial.dependencies;
         assert(deps.map((x) => x.source.uri).every((x) => x === parentPartial.uri));
         expect(deps.map((x) => x.target.uri)).toEqual(
-          expect.arrayContaining([
-            p('app/views/partials/child.liquid'), // {% render 'child' %}
-            p('assets/theme.js'), // <parent-element>
-          ]),
-        );
-        // ingoing links
-        const refs = parentPartial.references;
-        assert(refs.map((x) => x.target.uri).every((x) => x === parentPartial.uri));
-        expect(refs.map((x) => x.source.uri)).toEqual(
-          expect.arrayContaining([
-            p('blocks/group.liquid'), // {% render 'parent' %}
-          ]),
+          expect.arrayContaining([p('app/views/partials/child.liquid'), p('assets/app.js')]),
         );
-        // {% render 'child', children: children %} dependency
+        // {% render 'child' %} dependency
         const parentSource = await dependencies.getSourceCode(
           p('app/views/partials/parent.liquid'),
         );
@@ -210,36 +87,19 @@ describe('Module: index', () => {
             ],
           }),
         );
-        // <parent-element> dependency
-        expect(parentPartial.dependencies.map((x) => x.source)).toContainEqual(
-          expect.objectContaining({
-            uri: p('app/views/partials/parent.liquid'),
-            range: [
-              parentSource.source.indexOf('<parent-element'),
-              parentSource.source.indexOf('<parent-element') + '<parent-element'.length,
-            ],
-          }),
-        );
       });
-      it("finds the blocks/_static's dependencies and references", () => {
-        const staticBlock = graph.modules[p('blocks/_static.liquid')];
-        assert(staticBlock);
-        assert(staticBlock.type === ModuleType.Liquid);
-        assert(staticBlock.kind === LiquidModuleKind.Block);
-        // outgoing links
-        const deps = staticBlock.dependencies;
-        expect(deps).toEqual([]);
+      it("finds app/views/partials/child's references", () => {
+        const childPartial = graph.modules[p('app/views/partials/child.liquid')];
+        assert(childPartial);
+        assert(childPartial.type === ModuleType.Liquid);
+        assert(childPartial.kind === LiquidModuleKind.Partial);
-        // ingoing links
-        const refs = staticBlock.references;
-        assert(refs.map((x) => x.target.uri).every((x) => x === staticBlock.uri));
+        const refs = childPartial.references;
         expect(refs.map((x) => x.source.uri)).toEqual(
           expect.arrayContaining([
-            p('sections/header-group.json'),
-            p('blocks/render-static.liquid'),
+            p('app/views/partials/parent.liquid'),
+            p('app/views/partials/header.liquid'),
           ]),
         );
       });

package/src/graph/build.ts CHANGED Viewed

@@ -1,35 +1,32 @@
 import {
   recursiveReadDirectory as findAllFiles,
+  isLayout,
+  isPage,
   path,
   UriString,
 } from '@platformos/platformos-check-common';
-import { IDependencies, ThemeGraph, ThemeModule } from '../types';
+import { IDependencies, AppGraph, AppModule } from '../types';
 import { augmentDependencies } from './augment';
 import { getModule } from './module';
 import { traverseModule } from './traverse';
-export async function buildThemeGraph(
+export async function buildAppGraph(
   rootUri: UriString,
   ideps: IDependencies,
   entryPoints?: UriString[],
-): Promise<ThemeGraph> {
+): Promise<AppGraph> {
   const deps = augmentDependencies(rootUri, ideps);
   entryPoints =
     entryPoints ??
     (await findAllFiles(deps.fs, rootUri, ([uri]) => {
-      // Templates are entry points in the theme graph.
-      const isTemplateFile = uri.startsWith(path.join(rootUri, 'templates'));
-      // Since any section file can be rendered directly by the Section Rendering API,
-      // we consider all section files as entry points.
-      const isSectionFile =
-        uri.startsWith(path.join(rootUri, 'sections')) && uri.endsWith('.liquid');
-      return isTemplateFile || isSectionFile;
+      if (!uri.endsWith('.liquid')) return false;
+      // Layouts are entry points — they wrap all page content.
+      // Pages are also entry points — they are directly requested.
+      return isLayout(uri) || isPage(uri);
     }));
-  const graph: ThemeGraph = {
+  const graph: AppGraph = {
     entryPoints: [],
     modules: {},
     rootUri,
@@ -37,7 +34,7 @@ export async function buildThemeGraph(
   graph.entryPoints = entryPoints
     .map((uri) => getModule(graph, uri))
-    .filter((x): x is ThemeModule => x !== undefined);
+    .filter((x): x is AppModule => x !== undefined);
   await Promise.all(graph.entryPoints.map((entry) => traverseModule(entry, graph, deps)));