@valbuild/next 0.62.6 → 0.63.1

package/README.md

@@ -61,9 +61,9 @@ This is release is only for **INTERNAL** **TESTING** PURPOSES.
   - [Image](#image)
   - [keyOf](#keyof)
 
-## Introduction
+## Content as code
 
-Val is a CMS where **content** is **code** stored in your git repo.
+Val is a CMS library where **content** is **TypeScript** / **JavaScript** files stored in your git repo.
 
 As a CMS, Val is useful because:
 
@@ -196,7 +196,9 @@ export const schema = s.object({
     s.object({
       title: s.string(),
       text: s.richtext({
-        bold: true, // <- Enables bold in richtext
+        style: {
+          bold: true, // <- Enables bold in richtext
+        },
       }),
     })
   ),
@@ -210,8 +212,15 @@ export default c.define(
     sections: [
       {
         title: "Section 1",
-        text: c.richtext`
-RichText is **awesome**`,
+        text: [
+          {
+            tag: "p",
+            children: [
+              "Val is",
+              { tag: "span", styles: ["bold"], children: ["awesome"] },
+            ],
+          },
+        ],
       },
     ],
   }
@@ -245,7 +254,9 @@ const Page: NextPage = () => {
           <h2>{section.title}</h2>
           <ValRichText
             theme={{
-              bold: "font-bold",
+              style: {
+                bold: "font-bold",
+              },
             }}
           >
             {section.text}
@@ -348,27 +359,40 @@ To initialize some text content using a RichText schema, you can use follow the
 import { s, c } from "./val.config";
 
 export const schema = s.richtext({
-  // styling:
-  bold: true, // enables bold
-  //italic: true, // enables italic text
-  //lineThrough: true, // enables line/strike-through
+  // styling
+  style: {
+    bold: true, // enables bold
+    italic: true, // enables italic text
+    lineThrough: true, // enables line/strike-through
+  },
   // tags:
-  //headings: ["h1", "h2", "h3", "h4", "h5", "h6"], // sets which headings are available
-  //a: true, // enables links
-  //img: true, // enables images
-  //ul: true, // enables unordered lists
-  //ol: true, // enables ordered lists
+  block: {
+    //ul: true, // enables unordered lists
+    //ol: true, // enables ordered lists
+    // headings:
+    h1: true,
+    h2: true,
+    // h3: true,
+    // h4: true,
+    // h5: true,
+    // h6: true
+  },
+  inline: {
+    //a: true, // enables links
+    //img: true, // enables images
+  },
 });
 
-export default c.define(
-  "/src/app/content",
-  schema,
-  c.richtext`
-NOTE: this is markdown.
-
-**Bold** text.
-`
-);
+export default c.define("/src/app/content", schema, [
+  {
+    tag: "p",
+    children: ["This is richtext"],
+  },
+  {
+    tag: "p",
+    children: [{ tag: "span", styles: ["bold"], children: ["Bold"] }, "text"],
+  },
+]);
 ```
 
 ### Rendering RichText
@@ -387,7 +411,9 @@ export default function Page() {
     <main>
       <ValRichText
         theme={{
-          bold: "font-bold", // <- maps bold to a class. NOTE: tailwind classes are supported
+          style: {
+            bold: "font-bold", // <- maps bold to a class. NOTE: tailwind classes are supported
+          },
           //
         }}
       >

package/client/dist/valbuild-next-client.cjs.dev.js

@@ -7,7 +7,7 @@ var slicedToArray = require('../../dist/slicedToArray-c03b6356.cjs.dev.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
-var ValContext = require('../../dist/ValContext-8eb2ec77.cjs.dev.js');
+var ValContext = require('../../dist/ValContext-06fe6f7e.cjs.dev.js');
 require('../../dist/unsupportedIterableToArray-9e97e24a.cjs.dev.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -25,6 +25,12 @@ function useValStega(selector) {
   }, [valEvents]);
   if (valEvents) {
     var moduleIds = stega.getModuleIds(selector);
+    React__default["default"].useEffect(function () {
+      // NOTE: reload if a component using this starts rendering: this happens if you navigate to a page with this component
+      if (enabled) {
+        valEvents.reloadPaths(moduleIds);
+      }
+    }, [enabled]);
     var moduleMap = React__default["default"].useSyncExternalStore(valEvents.subscribe(moduleIds), valEvents.getSnapshot(moduleIds), valEvents.getServerSnapshot(moduleIds));
     return stega.stegaEncode(selector, {
       disabled: !enabled,

package/client/dist/valbuild-next-client.cjs.prod.js

@@ -7,7 +7,7 @@ var slicedToArray = require('../../dist/slicedToArray-1d91551a.cjs.prod.js');
 var core = require('@valbuild/core');
 var stega = require('@valbuild/react/stega');
 var React = require('react');
-var ValContext = require('../../dist/ValContext-df4a9ae7.cjs.prod.js');
+var ValContext = require('../../dist/ValContext-12a3eca2.cjs.prod.js');
 require('../../dist/unsupportedIterableToArray-afbea1dd.cjs.prod.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -25,6 +25,12 @@ function useValStega(selector) {
   }, [valEvents]);
   if (valEvents) {
     var moduleIds = stega.getModuleIds(selector);
+    React__default["default"].useEffect(function () {
+      // NOTE: reload if a component using this starts rendering: this happens if you navigate to a page with this component
+      if (enabled) {
+        valEvents.reloadPaths(moduleIds);
+      }
+    }, [enabled]);
     var moduleMap = React__default["default"].useSyncExternalStore(valEvents.subscribe(moduleIds), valEvents.getSnapshot(moduleIds), valEvents.getServerSnapshot(moduleIds));
     return stega.stegaEncode(selector, {
       disabled: !enabled,

package/client/dist/valbuild-next-client.esm.js

@@ -3,7 +3,7 @@ import { _ as _slicedToArray } from '../../dist/slicedToArray-1ff80c5e.esm.js';
 import { Internal } from '@valbuild/core';
 import { getModuleIds, stegaEncode } from '@valbuild/react/stega';
 import React from 'react';
-import { useValEvents } from '../../dist/ValContext-ea0b967a.esm.js';
+import { useValEvents } from '../../dist/ValContext-8a8d9183.esm.js';
 import '../../dist/unsupportedIterableToArray-51bb61c2.esm.js';
 
 function useValStega(selector) {
@@ -17,6 +17,12 @@ function useValStega(selector) {
   }, [valEvents]);
   if (valEvents) {
     var moduleIds = getModuleIds(selector);
+    React.useEffect(function () {
+      // NOTE: reload if a component using this starts rendering: this happens if you navigate to a page with this component
+      if (enabled) {
+        valEvents.reloadPaths(moduleIds);
+      }
+    }, [enabled]);
     var moduleMap = React.useSyncExternalStore(valEvents.subscribe(moduleIds), valEvents.getSnapshot(moduleIds), valEvents.getServerSnapshot(moduleIds));
     return stegaEncode(selector, {
       disabled: !enabled,

package/dist/{ValContext-8eb2ec77.cjs.dev.js → ValContext-06fe6f7e.cjs.dev.js}

@@ -124,6 +124,17 @@ var ValEvents = /*#__PURE__*/function () {
     this.listeners = {};
   }
   _createClass(ValEvents, [{
+    key: "reloadPaths",
+    value: function reloadPaths(paths) {
+      var event = new CustomEvent("val-store", {
+        detail: {
+          type: "reload-paths",
+          paths: paths
+        }
+      });
+      window.dispatchEvent(event);
+    }
+  }, {
     key: "update",
     value: function update(path, source) {
       var subscriberIds = Array.from(this.subscribers.keys());

package/dist/ValContext-12a3eca2.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./ValContext-12a3eca2.cjs.prod.js");
+} else {
+  module.exports = require("./ValContext-12a3eca2.cjs.dev.js");
+}

package/dist/{ValContext-df4a9ae7.cjs.prod.js → ValContext-12a3eca2.cjs.prod.js}

@@ -124,6 +124,17 @@ var ValEvents = /*#__PURE__*/function () {
     this.listeners = {};
   }
   _createClass(ValEvents, [{
+    key: "reloadPaths",
+    value: function reloadPaths(paths) {
+      var event = new CustomEvent("val-store", {
+        detail: {
+          type: "reload-paths",
+          paths: paths
+        }
+      });
+      window.dispatchEvent(event);
+    }
+  }, {
     key: "update",
     value: function update(path, source) {
       var subscriberIds = Array.from(this.subscribers.keys());

package/dist/{ValContext-ea0b967a.esm.js → ValContext-8a8d9183.esm.js}

@@ -116,6 +116,17 @@ var ValEvents = /*#__PURE__*/function () {
     this.listeners = {};
   }
   _createClass(ValEvents, [{
+    key: "reloadPaths",
+    value: function reloadPaths(paths) {
+      var event = new CustomEvent("val-store", {
+        detail: {
+          type: "reload-paths",
+          paths: paths
+        }
+      });
+      window.dispatchEvent(event);
+    }
+  }, {
     key: "update",
     value: function update(path, source) {
       var subscriberIds = Array.from(this.subscribers.keys());

package/dist/ValNextProvider-5226c452.cjs.prod.js

@@ -9,7 +9,7 @@ var ui = require('@valbuild/ui');
 var navigation = require('next/navigation');
 var Script = require('next/script');
 var React = require('react');
-var ValContext = require('./ValContext-df4a9ae7.cjs.prod.js');
+var ValContext = require('./ValContext-12a3eca2.cjs.prod.js');
 var stega = require('@valbuild/react/stega');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-afbea1dd.cjs.prod.js');

package/dist/ValNextProvider-ccbea1bd.cjs.dev.js

@@ -9,7 +9,7 @@ var ui = require('@valbuild/ui');
 var navigation = require('next/navigation');
 var Script = require('next/script');
 var React = require('react');
-var ValContext = require('./ValContext-8eb2ec77.cjs.dev.js');
+var ValContext = require('./ValContext-06fe6f7e.cjs.dev.js');
 var stega = require('@valbuild/react/stega');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-9e97e24a.cjs.dev.js');

package/dist/ValNextProvider-d94cd904.esm.js

@@ -5,7 +5,7 @@ import { VAL_APP_PATH, VAL_OVERLAY_ID } from '@valbuild/ui';
 import { usePathname, useRouter } from 'next/navigation';
 import Script from 'next/script';
 import React from 'react';
-import { ValEvents, ValContext } from './ValContext-ea0b967a.esm.js';
+import { ValEvents, ValContext } from './ValContext-8a8d9183.esm.js';
 import { SET_AUTO_TAG_JSX_ENABLED } from '@valbuild/react/stega';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-51bb61c2.esm.js';

package/dist/declarations/src/external_exempt_from_val_quickjs.d.ts

@@ -2,7 +2,7 @@ export { Schema, type SerializedSchema } from "@valbuild/core";
 export type { SourceObject, SourcePrimitive, Source } from "@valbuild/core";
 export type { ValModule, SerializedModule } from "@valbuild/core";
 export type { FileSource } from "@valbuild/core";
-export type { RichTextSource, RichText } from "@valbuild/core";
+export type { RichTextSource } from "@valbuild/core";
 export { type Val, type SerializedVal, type ModuleFilePath, type ModulePath, type SourcePath, type JsonOfSource, } from "@valbuild/core";
 export { modules, type ValModules } from "@valbuild/core";
 export type { Json, JsonPrimitive } from "@valbuild/core";
@@ -14,7 +14,7 @@ export { VAL_EXTENSION, type SourceArray } from "@valbuild/core";
 export { derefPatch } from "@valbuild/core";
 export { type SelectorSource, type SelectorOf, GenericSelector, } from "@valbuild/core";
 export { ValRichText } from "@valbuild/react/internal";
-export { type ValEncodedString, type Image } from "@valbuild/react/stega";
+export { type ValEncodedString, type File, type Image, type RichText, } from "@valbuild/react/stega";
 export { ValProvider } from "./ValProvider.js";
 export { ValImage, type ValImageProps } from "./ValImage.js";
 export { ValApp } from "./ValApp.js";

package/dist/declarations/src/initVal.d.ts

@@ -1,4 +1,4 @@
-import { type ValConfig, type InitVal, type ValConstructor, RichText, AnyRichTextOptions, ValModule, SelectorSource, Json } from "@valbuild/core";
+import { type ValConfig, type InitVal, type ValConstructor, ValModule, SelectorSource, Json } from "@valbuild/core";
 import { raw } from "./raw.js";
 import { decodeValPathOfString } from "./decodeValPathOfString.js";
 type ValAttrs = {
@@ -7,7 +7,7 @@ type ValAttrs = {
 export declare const initVal: (config?: ValConfig) => InitVal & {
     val: ValConstructor & {
         raw: typeof raw;
-        attrs: <T extends ValModule<SelectorSource> | Json | RichText<AnyRichTextOptions>>(target: T) => ValAttrs;
+        attrs: <T extends ValModule<SelectorSource> | Json>(target: T) => ValAttrs;
         unstable_decodeValPathOfString: typeof decodeValPathOfString;
     };
 };

package/package.json

@@ -8,7 +8,7 @@
     "next",
     "react"
   ],
-  "version": "0.62.6",
+  "version": "0.63.1",
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest"
@@ -45,10 +45,10 @@
     "exports": true
   },
   "dependencies": {
-    "@valbuild/core": "~0.62.6",
-    "@valbuild/react": "~0.62.6",
-    "@valbuild/server": "~0.62.6",
-    "@valbuild/ui": "~0.62.6",
+    "@valbuild/core": "~0.63.1",
+    "@valbuild/react": "~0.63.1",
+    "@valbuild/server": "~0.63.1",
+    "@valbuild/ui": "~0.63.1",
     "client-only": "^0.0.1",
     "server-only": "^0.0.1"
   },

package/dist/ValContext-df4a9ae7.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./ValContext-df4a9ae7.cjs.prod.js");
-} else {
-  module.exports = require("./ValContext-df4a9ae7.cjs.dev.js");
-}