@valbuild/react 0.20.0 → 0.21.0

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.
@@ -1,10 +1,11 @@
1
+ 'use client';
1
2
  import { a as _slicedToArray } from './slicedToArray-0cbb3d34.browser.esm.js';
2
3
  import { Internal } from '@valbuild/core';
3
4
  import { Style, ValOverlay } from '@valbuild/ui';
4
5
  import { useRef, useState, useLayoutEffect, useEffect } from 'react';
5
6
  import { createPortal } from 'react-dom';
6
7
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
7
- import { useValApi } from './valbuild-react.browser.esm.js';
8
+ import { a as useValApi } from './ValProvider-a6ce7155.browser.esm.js';
8
9
  import './defineProperty-034d0378.browser.esm.js';
9
10
  import '@valbuild/core/fp';
10
11
 
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ if (process.env.NODE_ENV === "production") {
4
+ module.exports = require("./ValUI-9b5a2304.cjs.prod.js");
5
+ } else {
6
+ module.exports = require("./ValUI-9b5a2304.cjs.dev.js");
7
+ }
@@ -1,12 +1,15 @@
1
+ 'use client';
1
2
  'use strict';
2
3
 
4
+ Object.defineProperty(exports, '__esModule', { value: true });
5
+
3
6
  var slicedToArray = require('./slicedToArray-5bddfa58.cjs.prod.js');
4
7
  var core = require('@valbuild/core');
5
8
  var ui = require('@valbuild/ui');
6
9
  var React = require('react');
7
10
  var reactDom = require('react-dom');
8
11
  var ReactJSXRuntime = require('react/jsx-runtime');
9
- var dist_valbuildReact = require('./valbuild-react.cjs.prod.js');
12
+ var ValProvider = require('./ValProvider-e8201907.cjs.prod.js');
10
13
  require('./defineProperty-36ed93cd.cjs.prod.js');
11
14
  require('@valbuild/core/fp');
12
15
 
@@ -59,7 +62,7 @@ function ValUI() {
59
62
  _useState6 = slicedToArray._slicedToArray(_useState5, 2);
60
63
  _useState6[0];
61
64
  var setDraftMode = _useState6[1]; // TODO: if enabled, but not in draft mode: show something
62
- var api = dist_valbuildReact.useValApi();
65
+ var api = ValProvider.useValApi();
63
66
  React.useEffect(function () {
64
67
  setIsClient(true);
65
68
  try {
@@ -0,0 +1,110 @@
1
+ 'use client';
2
+ import { a as _slicedToArray } from './slicedToArray-5a51fd33.worker.esm.js';
3
+ import { Internal } from '@valbuild/core';
4
+ import { Style, ValOverlay } from '@valbuild/ui';
5
+ import { useRef, useState, useLayoutEffect, useEffect } from 'react';
6
+ import { createPortal } from 'react-dom';
7
+ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
8
+ import { a as useValApi } from './ValProvider-5026936f.worker.esm.js';
9
+ import './defineProperty-18559492.worker.esm.js';
10
+ import '@valbuild/core/fp';
11
+
12
+ function ShadowContent(_ref) {
13
+ var root = _ref.root,
14
+ children = _ref.children;
15
+ return /*#__PURE__*/createPortal(children, root);
16
+ }
17
+ var ShadowRoot = function ShadowRoot(_ref2) {
18
+ var children = _ref2.children,
19
+ style = _ref2.style;
20
+ var node = useRef(null);
21
+ var _useState = useState(null),
22
+ _useState2 = _slicedToArray(_useState, 2),
23
+ root = _useState2[0],
24
+ setRoot = _useState2[1];
25
+ useLayoutEffect(function () {
26
+ if (node.current) {
27
+ if (node.current.shadowRoot) {
28
+ setRoot(node.current.shadowRoot);
29
+ } else {
30
+ var _root = node.current.attachShadow({
31
+ mode: "open"
32
+ });
33
+ setRoot(_root);
34
+ }
35
+ }
36
+ }, []);
37
+ return /*#__PURE__*/jsx("div", {
38
+ ref: node,
39
+ style: style,
40
+ children: root && /*#__PURE__*/jsx(ShadowContent, {
41
+ root: root,
42
+ children: children
43
+ })
44
+ });
45
+ };
46
+
47
+ function ValUI() {
48
+ var _useState = useState(false),
49
+ _useState2 = _slicedToArray(_useState, 2),
50
+ isClient = _useState2[0],
51
+ setIsClient = _useState2[1];
52
+ var _useState3 = useState(false),
53
+ _useState4 = _slicedToArray(_useState3, 2),
54
+ enabled = _useState4[0],
55
+ setEnabled = _useState4[1];
56
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
57
+ var _useState5 = useState(false),
58
+ _useState6 = _slicedToArray(_useState5, 2);
59
+ _useState6[0];
60
+ var setDraftMode = _useState6[1]; // TODO: if enabled, but not in draft mode: show something
61
+ var api = useValApi();
62
+ useEffect(function () {
63
+ setIsClient(true);
64
+ try {
65
+ var _document$cookie;
66
+ var valEnabled = (_document$cookie = document.cookie) === null || _document$cookie === void 0 ? void 0 : _document$cookie.includes("".concat(Internal.VAL_ENABLE_COOKIE_NAME, "=true"));
67
+ setEnabled(valEnabled);
68
+ } catch (e) {
69
+ console.warn("Could not read Val enabled state", e);
70
+ }
71
+ try {
72
+ var _document$cookie2;
73
+ var valDraftMode = (_document$cookie2 = document.cookie) === null || _document$cookie2 === void 0 ? void 0 : _document$cookie2.includes("".concat(Internal.VAL_DRAFT_MODE_COOKIE, "=true"));
74
+ setDraftMode(valDraftMode);
75
+ } catch (e) {
76
+ console.warn("Could not read Val draft mode", e);
77
+ }
78
+ }, []);
79
+ if (isClient && !enabled && process.env.NODE_ENV === "development") {
80
+ console.log("Val is disabled. Enable it by going here ".concat(window.origin).concat(api.host, "/enable?redirect_to=").concat(encodeURIComponent(window.location.href), ". NOTE: this message appears because NODE_ENV is set to development."));
81
+ }
82
+ if (!isClient || !enabled) {
83
+ return null;
84
+ }
85
+ return /*#__PURE__*/jsx(Fragment, {
86
+ children: /*#__PURE__*/jsxs(ShadowRoot, {
87
+ style: {
88
+ position: "absolute",
89
+ top: 0,
90
+ left: 0,
91
+ zIndex: 8999 // 1 less than the NextJS error z-index: 9000
92
+ },
93
+ children: [/*#__PURE__*/jsx("link", {
94
+ rel: "preconnect",
95
+ href: "https://fonts.googleapis.com"
96
+ }), /*#__PURE__*/jsx("link", {
97
+ rel: "preconnect",
98
+ href: "https://fonts.gstatic.com",
99
+ crossOrigin: "anonymous"
100
+ }), /*#__PURE__*/jsx("link", {
101
+ href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap",
102
+ rel: "stylesheet"
103
+ }), /*#__PURE__*/jsx(Style, {}), /*#__PURE__*/jsx(ValOverlay, {
104
+ api: api
105
+ })]
106
+ })
107
+ });
108
+ }
109
+
110
+ export { ValUI as default };
@@ -12,9 +12,7 @@ type ThemeOptions<O extends RichTextOptions> = {
12
12
  };
13
13
  classes: {
14
14
  [Key in Classes & keyof O as O[Key] extends true ? Key : never]: string;
15
- } & (O["img"] extends true ? {
16
- imgContainer?: string;
17
- } : {});
15
+ };
18
16
  };
19
17
  export declare function ValRichText<O extends RichTextOptions>({ theme, children, }: {
20
18
  theme: ThemeOptions<O>;