@graffy/explore 0.19.1-alpha.1 → 0.19.1

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 (10) hide show
  1. package/index.cjs +152 -0
  2. package/index.mjs +136 -0
  3. package/package.json +11 -16
  4. package/types/index.d.ts +1 -0
  5. package/Explore.d.ts +0 -1
  6. package/Explore.js +0 -110
  7. package/ExploreContainer.d.ts +0 -5
  8. package/ExploreContainer.js +0 -20
  9. package/index.d.ts +0 -2
  10. package/index.js +0 -2
package/index.cjs ADDED
@@ -0,0 +1,152 @@
1
+ "use strict";
2
+ const GraffyClient = require("@graffy/client");
3
+ const common = require("@graffy/common");
4
+ const Graffy = require("@graffy/core");
5
+ const GraffyFill = require("@graffy/fill");
6
+ const react$1 = require("@graffy/react");
7
+ const react = require("react");
8
+ function _interopNamespaceDefault(e) {
9
+ const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
10
+ if (e) {
11
+ for (const k in e) {
12
+ if (k !== "default") {
13
+ const d = Object.getOwnPropertyDescriptor(e, k);
14
+ Object.defineProperty(n, k, d.get ? d : {
15
+ enumerable: true,
16
+ get: () => e[k]
17
+ });
18
+ }
19
+ }
20
+ }
21
+ n.default = e;
22
+ return Object.freeze(n);
23
+ }
24
+ const common__namespace = /* @__PURE__ */ _interopNamespaceDefault(common);
25
+ function Result({ result, loading, error }) {
26
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, loading ? /* @__PURE__ */ React.createElement("div", { className: "status" }, "Loading...") : error ? /* @__PURE__ */ React.createElement("div", { className: "error" }, error.toString()) : result ? /* @__PURE__ */ React.createElement("pre", null, JSON.stringify(result, null, 2)) : /* @__PURE__ */ React.createElement("div", { className: "status" }, "No results"), /* @__PURE__ */ React.createElement("style", { jsx: true }, `
27
+ .error {
28
+ color: #c00;
29
+ padding: 1rem;
30
+ }
31
+ .status {
32
+ color: #888;
33
+ padding: 1rem;
34
+ }
35
+ `));
36
+ }
37
+ function evaluate(expression) {
38
+ const names = Object.keys(common__namespace);
39
+ const fn = new Function(...names, `return ${expression};`);
40
+ return fn(...names.map((name) => common__namespace[name]));
41
+ }
42
+ function Explore(options) {
43
+ const [input, setInput] = react.useState({});
44
+ const [error, setError] = react.useState(null);
45
+ const [loading, setLoading] = react.useState(false);
46
+ const [result, setResult] = react.useState(null);
47
+ const [watching, setWatching] = react.useState(null);
48
+ const store = react$1.useStore();
49
+ const onInputEnd = react.useCallback(
50
+ (event) => {
51
+ try {
52
+ setInput(evaluate(event.target.textContent));
53
+ } catch (e) {
54
+ setError(e.message);
55
+ }
56
+ },
57
+ [setInput, setError]
58
+ );
59
+ const onInputStart = react.useCallback(() => setError(null), [setError]);
60
+ const onReadClick = async () => {
61
+ setWatching(false);
62
+ setLoading(true);
63
+ try {
64
+ setResult(await store.read(input, options));
65
+ } catch (e) {
66
+ setError(e.message);
67
+ } finally {
68
+ setLoading(false);
69
+ }
70
+ };
71
+ const onWriteClick = async () => {
72
+ setWatching(false);
73
+ setLoading(true);
74
+ try {
75
+ setResult(await store.write(input, options));
76
+ } catch (e) {
77
+ setError(e.message);
78
+ } finally {
79
+ setLoading(false);
80
+ }
81
+ };
82
+ const onWatchClick = () => {
83
+ setResult(null);
84
+ setLoading(false);
85
+ setWatching((w) => !w);
86
+ };
87
+ return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
88
+ "pre",
89
+ {
90
+ className: "editor",
91
+ contentEditable: true,
92
+ onFocus: onInputStart,
93
+ onBlur: onInputEnd
94
+ }
95
+ ), /* @__PURE__ */ React.createElement("div", { className: "opbar" }, /* @__PURE__ */ React.createElement("button", { className: "opbtn", disabled: watching, onClick: onReadClick }, "read()"), /* @__PURE__ */ React.createElement("button", { className: "opbtn", disabled: watching, onClick: onWriteClick }, "write()"), /* @__PURE__ */ React.createElement("button", { className: "opbtn", "data-active": watching, onClick: onWatchClick }, "watch()")), error ? /* @__PURE__ */ React.createElement("div", { className: "error" }, error) : watching ? /* @__PURE__ */ React.createElement(react$1.Query, { query: input, options }, (props) => /* @__PURE__ */ React.createElement(Result, { ...props })) : /* @__PURE__ */ React.createElement(Result, { ...{ result, loading, error } }), /* @__PURE__ */ React.createElement("style", { jsx: true }, `
96
+ .error {
97
+ color: #c00;
98
+ padding: 1rem;
99
+ }
100
+ .editor {
101
+ min-height: 1rem;
102
+ width: 100%;
103
+ }
104
+ .opbar {
105
+ display: flex;
106
+ }
107
+ .opbtn {
108
+ flex: 1 1 0;
109
+ background: #ccc;
110
+ color: #333;
111
+ padding: 0.5rem 1rem;
112
+ border: none;
113
+ }
114
+ .opbtn:first-child {
115
+ border-top-left-radius: 4px;
116
+ border-bottom-left-radius: 4px;
117
+ }
118
+ .opbtn:last-child {
119
+ border-top-right-radius: 4px;
120
+ border-bottom-right-radius: 4px;
121
+ }
122
+ .opbtn:not(:disabled):hover {
123
+ cursor: pointer;
124
+ box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.1);
125
+ }
126
+ .opbtn[data-active='true']:not(:disabled),
127
+ .opbtn:not(:disabled):active {
128
+ background: #f36;
129
+ color: #fff;
130
+ }
131
+ .opbtn:disabled {
132
+ color: #888;
133
+ }
134
+ `));
135
+ }
136
+ function ExploreContainer({
137
+ baseUrl = "/",
138
+ getOptions,
139
+ ...options
140
+ }) {
141
+ const [store, setStore] = react.useState();
142
+ react.useEffect(() => {
143
+ const store2 = new Graffy();
144
+ store2.use(GraffyFill());
145
+ store2.use(GraffyClient(baseUrl, { getOptions }));
146
+ setStore(store2);
147
+ window.store = store2;
148
+ window.graffy = common__namespace;
149
+ }, [baseUrl, getOptions]);
150
+ return store ? /* @__PURE__ */ React.createElement(react$1.GraffyProvider, { store }, /* @__PURE__ */ React.createElement(Explore, { ...options })) : null;
151
+ }
152
+ module.exports = ExploreContainer;
package/index.mjs ADDED
@@ -0,0 +1,136 @@
1
+ import GraffyClient from "@graffy/client";
2
+ import * as common from "@graffy/common";
3
+ import Graffy from "@graffy/core";
4
+ import GraffyFill from "@graffy/fill";
5
+ import { useStore, Query, GraffyProvider } from "@graffy/react";
6
+ import { useState, useCallback, useEffect } from "react";
7
+ function Result({ result, loading, error }) {
8
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, loading ? /* @__PURE__ */ React.createElement("div", { className: "status" }, "Loading...") : error ? /* @__PURE__ */ React.createElement("div", { className: "error" }, error.toString()) : result ? /* @__PURE__ */ React.createElement("pre", null, JSON.stringify(result, null, 2)) : /* @__PURE__ */ React.createElement("div", { className: "status" }, "No results"), /* @__PURE__ */ React.createElement("style", { jsx: true }, `
9
+ .error {
10
+ color: #c00;
11
+ padding: 1rem;
12
+ }
13
+ .status {
14
+ color: #888;
15
+ padding: 1rem;
16
+ }
17
+ `));
18
+ }
19
+ function evaluate(expression) {
20
+ const names = Object.keys(common);
21
+ const fn = new Function(...names, `return ${expression};`);
22
+ return fn(...names.map((name) => common[name]));
23
+ }
24
+ function Explore(options) {
25
+ const [input, setInput] = useState({});
26
+ const [error, setError] = useState(null);
27
+ const [loading, setLoading] = useState(false);
28
+ const [result, setResult] = useState(null);
29
+ const [watching, setWatching] = useState(null);
30
+ const store = useStore();
31
+ const onInputEnd = useCallback(
32
+ (event) => {
33
+ try {
34
+ setInput(evaluate(event.target.textContent));
35
+ } catch (e) {
36
+ setError(e.message);
37
+ }
38
+ },
39
+ [setInput, setError]
40
+ );
41
+ const onInputStart = useCallback(() => setError(null), [setError]);
42
+ const onReadClick = async () => {
43
+ setWatching(false);
44
+ setLoading(true);
45
+ try {
46
+ setResult(await store.read(input, options));
47
+ } catch (e) {
48
+ setError(e.message);
49
+ } finally {
50
+ setLoading(false);
51
+ }
52
+ };
53
+ const onWriteClick = async () => {
54
+ setWatching(false);
55
+ setLoading(true);
56
+ try {
57
+ setResult(await store.write(input, options));
58
+ } catch (e) {
59
+ setError(e.message);
60
+ } finally {
61
+ setLoading(false);
62
+ }
63
+ };
64
+ const onWatchClick = () => {
65
+ setResult(null);
66
+ setLoading(false);
67
+ setWatching((w) => !w);
68
+ };
69
+ return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
70
+ "pre",
71
+ {
72
+ className: "editor",
73
+ contentEditable: true,
74
+ onFocus: onInputStart,
75
+ onBlur: onInputEnd
76
+ }
77
+ ), /* @__PURE__ */ React.createElement("div", { className: "opbar" }, /* @__PURE__ */ React.createElement("button", { className: "opbtn", disabled: watching, onClick: onReadClick }, "read()"), /* @__PURE__ */ React.createElement("button", { className: "opbtn", disabled: watching, onClick: onWriteClick }, "write()"), /* @__PURE__ */ React.createElement("button", { className: "opbtn", "data-active": watching, onClick: onWatchClick }, "watch()")), error ? /* @__PURE__ */ React.createElement("div", { className: "error" }, error) : watching ? /* @__PURE__ */ React.createElement(Query, { query: input, options }, (props) => /* @__PURE__ */ React.createElement(Result, { ...props })) : /* @__PURE__ */ React.createElement(Result, { ...{ result, loading, error } }), /* @__PURE__ */ React.createElement("style", { jsx: true }, `
78
+ .error {
79
+ color: #c00;
80
+ padding: 1rem;
81
+ }
82
+ .editor {
83
+ min-height: 1rem;
84
+ width: 100%;
85
+ }
86
+ .opbar {
87
+ display: flex;
88
+ }
89
+ .opbtn {
90
+ flex: 1 1 0;
91
+ background: #ccc;
92
+ color: #333;
93
+ padding: 0.5rem 1rem;
94
+ border: none;
95
+ }
96
+ .opbtn:first-child {
97
+ border-top-left-radius: 4px;
98
+ border-bottom-left-radius: 4px;
99
+ }
100
+ .opbtn:last-child {
101
+ border-top-right-radius: 4px;
102
+ border-bottom-right-radius: 4px;
103
+ }
104
+ .opbtn:not(:disabled):hover {
105
+ cursor: pointer;
106
+ box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.1);
107
+ }
108
+ .opbtn[data-active='true']:not(:disabled),
109
+ .opbtn:not(:disabled):active {
110
+ background: #f36;
111
+ color: #fff;
112
+ }
113
+ .opbtn:disabled {
114
+ color: #888;
115
+ }
116
+ `));
117
+ }
118
+ function ExploreContainer({
119
+ baseUrl = "/",
120
+ getOptions,
121
+ ...options
122
+ }) {
123
+ const [store, setStore] = useState();
124
+ useEffect(() => {
125
+ const store2 = new Graffy();
126
+ store2.use(GraffyFill());
127
+ store2.use(GraffyClient(baseUrl, { getOptions }));
128
+ setStore(store2);
129
+ window.store = store2;
130
+ window.graffy = common;
131
+ }, [baseUrl, getOptions]);
132
+ return store ? /* @__PURE__ */ React.createElement(GraffyProvider, { store }, /* @__PURE__ */ React.createElement(Explore, { ...options })) : null;
133
+ }
134
+ export {
135
+ ExploreContainer as default
136
+ };
package/package.json CHANGED
@@ -2,30 +2,25 @@
2
2
  "name": "@graffy/explore",
3
3
  "description": "Graffy client library for the browser.",
4
4
  "author": "aravind (https://github.com/aravindet)",
5
- "version": "0.19.1-alpha.1",
6
- "main": "./cjs/index.js",
5
+ "version": "0.19.1",
6
+ "main": "./index.cjs",
7
7
  "exports": {
8
- ".": {
9
- "import": "./index.js",
10
- "types": "./index.d.ts"
11
- },
12
- "./*": {
13
- "import": "./*.js",
14
- "types": "./*.d.ts"
15
- }
8
+ "import": "./index.mjs",
9
+ "require": "./index.cjs"
16
10
  },
17
- "types": "./index.d.ts",
11
+ "module": "./index.mjs",
12
+ "types": "./types/index.d.ts",
18
13
  "repository": {
19
14
  "type": "git",
20
15
  "url": "git+https://github.com/usegraffy/graffy.git"
21
16
  },
22
17
  "license": "Apache-2.0",
23
18
  "dependencies": {
24
- "@graffy/common": "0.19.1-alpha.1",
25
- "@graffy/react": "0.19.1-alpha.1",
26
- "@graffy/client": "0.19.1-alpha.1",
27
- "@graffy/core": "0.19.1-alpha.1",
28
- "@graffy/fill": "0.19.1-alpha.1"
19
+ "@graffy/client": "0.19.1",
20
+ "@graffy/common": "0.19.1",
21
+ "@graffy/core": "0.19.1",
22
+ "@graffy/fill": "0.19.1",
23
+ "@graffy/react": "0.19.1"
29
24
  },
30
25
  "peerDependencies": {
31
26
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
package/types/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export default ExploreContainer;
package/Explore.d.ts DELETED
@@ -1 +0,0 @@
1
- export default function Explore(options: any): import("react/jsx-runtime").JSX.Element;
package/Explore.js DELETED
@@ -1,110 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as common from '@graffy/common';
3
- import { Query, useStore } from '@graffy/react';
4
- import { useCallback, useState } from 'react';
5
- function Result({ result, loading, error }) {
6
- return (_jsxs(_Fragment, { children: [loading ? (_jsx("div", { className: "status", children: "Loading..." })) : error ? (_jsx("div", { className: "error", children: error.toString() })) : result ? (_jsx("pre", { children: JSON.stringify(result, null, 2) })) : (_jsx("div", { className: "status", children: "No results" })), _jsx("style", { jsx: true, children: `
7
- .error {
8
- color: #c00;
9
- padding: 1rem;
10
- }
11
- .status {
12
- color: #888;
13
- padding: 1rem;
14
- }
15
- ` })] }));
16
- }
17
- function evaluate(expression) {
18
- const names = Object.keys(common);
19
- const fn = new Function(...names, `return ${expression};`);
20
- // biome-ignore lint/performance/noDynamicNamespaceImportAccess: intentional — exposes all exports to user eval
21
- return fn(...names.map((name) => common[name]));
22
- }
23
- export default function Explore(options) {
24
- const [input, setInput] = useState({});
25
- const [error, setError] = useState(null);
26
- const [loading, setLoading] = useState(false);
27
- const [result, setResult] = useState(null);
28
- const [watching, setWatching] = useState(null);
29
- const store = useStore();
30
- const onInputEnd = useCallback((event) => {
31
- try {
32
- setInput(evaluate(event.target.textContent));
33
- }
34
- catch (e) {
35
- setError(e.message);
36
- }
37
- }, [setInput, setError]);
38
- const onInputStart = useCallback(() => setError(null), [setError]);
39
- const onReadClick = async () => {
40
- setWatching(false);
41
- setLoading(true);
42
- try {
43
- setResult(await store.read(input, options));
44
- }
45
- catch (e) {
46
- setError(e.message);
47
- }
48
- finally {
49
- setLoading(false);
50
- }
51
- };
52
- const onWriteClick = async () => {
53
- setWatching(false);
54
- setLoading(true);
55
- try {
56
- setResult(await store.write(input, options));
57
- }
58
- catch (e) {
59
- setError(e.message);
60
- }
61
- finally {
62
- setLoading(false);
63
- }
64
- };
65
- const onWatchClick = () => {
66
- setResult(null);
67
- setLoading(false);
68
- setWatching((w) => !w);
69
- };
70
- return (_jsxs("div", { children: [_jsx("pre", { className: "editor", contentEditable: true, onFocus: onInputStart, onBlur: onInputEnd }), _jsxs("div", { className: "opbar", children: [_jsx("button", { className: "opbtn", disabled: watching, onClick: onReadClick, children: "read()" }), _jsx("button", { className: "opbtn", disabled: watching, onClick: onWriteClick, children: "write()" }), _jsx("button", { className: "opbtn", "data-active": watching, onClick: onWatchClick, children: "watch()" })] }), error ? (_jsx("div", { className: "error", children: error })) : watching ? (_jsx(Query, { query: input, options: options, children: (props) => _jsx(Result, { ...props }) })) : (_jsx(Result, { result, loading, error })), _jsx("style", { jsx: true, children: `
71
- .error {
72
- color: #c00;
73
- padding: 1rem;
74
- }
75
- .editor {
76
- min-height: 1rem;
77
- width: 100%;
78
- }
79
- .opbar {
80
- display: flex;
81
- }
82
- .opbtn {
83
- flex: 1 1 0;
84
- background: #ccc;
85
- color: #333;
86
- padding: 0.5rem 1rem;
87
- border: none;
88
- }
89
- .opbtn:first-child {
90
- border-top-left-radius: 4px;
91
- border-bottom-left-radius: 4px;
92
- }
93
- .opbtn:last-child {
94
- border-top-right-radius: 4px;
95
- border-bottom-right-radius: 4px;
96
- }
97
- .opbtn:not(:disabled):hover {
98
- cursor: pointer;
99
- box-shadow: inset 0 0 0 20px rgba(0, 0, 0, 0.1);
100
- }
101
- .opbtn[data-active='true']:not(:disabled),
102
- .opbtn:not(:disabled):active {
103
- background: #f36;
104
- color: #fff;
105
- }
106
- .opbtn:disabled {
107
- color: #888;
108
- }
109
- ` })] }));
110
- }
package/ExploreContainer.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export default function ExploreContainer({ baseUrl, getOptions, ...options }: {
2
- [x: string]: any;
3
- baseUrl?: string;
4
- getOptions: any;
5
- }): import("react/jsx-runtime").JSX.Element;
package/ExploreContainer.js DELETED
@@ -1,20 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import GraffyClient from '@graffy/client';
3
- import * as common from '@graffy/common';
4
- import Graffy from '@graffy/core';
5
- import GraffyFill from '@graffy/fill';
6
- import { GraffyProvider } from '@graffy/react';
7
- import { useEffect, useState } from 'react';
8
- import Explore from "./Explore.js";
9
- export default function ExploreContainer({ baseUrl = '/', getOptions, ...options }) {
10
- const [store, setStore] = useState();
11
- useEffect(() => {
12
- const store = new Graffy();
13
- store.use(GraffyFill());
14
- store.use(GraffyClient(baseUrl, { getOptions }));
15
- setStore(store);
16
- window.store = store;
17
- window.graffy = common;
18
- }, [baseUrl, getOptions]);
19
- return store ? (_jsx(GraffyProvider, { store: store, children: _jsx(Explore, { ...options }) })) : null;
20
- }
package/index.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import ExploreContainer from './ExploreContainer.js';
2
- export default ExploreContainer;
package/index.js DELETED
@@ -1,2 +0,0 @@
1
- import ExploreContainer from "./ExploreContainer.js";
2
- export default ExploreContainer;