@redocly/config-rules-builder 0.1.6 → 0.2.0

package/README.md

@@ -25,8 +25,8 @@ assertions, on the right.
 - **Inline problems.** Failing assertions get a squiggly underline with a hover tooltip, a gutter
   marker, and an entry in the Problems list that jumps to the location.
 - **Import and export.** Paste an existing `redocly.yaml`, or copy and download the generated one.
-- **Bring your own document.** Upload any OpenAPI file (YAML or JSON, up to 2 MB) or edit the
-  sample in place.
+- **Bring your own document.** The host passes the initial OpenAPI document; visitors can upload
+  any OpenAPI file (YAML or JSON, up to 2 MB) or edit it in place.
 
 ## Install
 
@@ -43,16 +43,30 @@ consumers work; `require()` is not supported.
 ## Usage
 
 ```tsx
+import { useEffect, useState } from 'react';
 import { RulesBuilder } from '@redocly/config-rules-builder';
 
+const CAFE_SPEC_URL = 'https://redocly.github.io/redoc/cafe.yaml';
+
 export function ConfigRulesBuilderPage() {
-  return <RulesBuilder />;
+  const [spec, setSpec] = useState<string>();
+  useEffect(() => {
+    fetch(CAFE_SPEC_URL)
+      .then((response) => response.text())
+      .then(setSpec);
+  }, []);
+
+  return spec === undefined ? null : (
+    <RulesBuilder defaultSpec={spec} defaultSpecFileName="cafe.yaml" />
+  );
 }
 ```
 
-The component is self-contained: it ships with a sample OpenAPI document, a demo rule, and
-copy/download buttons for the generated `redocly.yaml` snippet. Pass `onRuleChange` to receive the
-snippet in the host app; see [Props](#props).
+The package does not bundle an OpenAPI document: the host passes the one shown initially through
+`defaultSpec`. The demo app loads the [Redocly Cafe API](https://redocly.github.io/redoc/cafe.yaml)
+at runtime so the sample never goes stale; a static file imported as text works too. The component
+ships with a demo rule and copy/download buttons for the generated `redocly.yaml` snippet. Pass
+`onRuleChange` to receive the snippet in the host app; see [Props](#props).
 
 ### Server-side rendering
 
@@ -64,24 +78,34 @@ import { useEffect, useState } from 'react';
 import { RulesBuilder } from '@redocly/config-rules-builder';
 
 export default function RulesBuilderPage() {
-  const [isClientSide, setIsClientSide] = useState(false);
-  useEffect(() => setIsClientSide(true), []);
-
-  return isClientSide ? <RulesBuilder /> : <div style={{ minHeight: 640 }} />;
+  const [spec, setSpec] = useState<string>();
+  useEffect(() => {
+    fetch('https://redocly.github.io/redoc/cafe.yaml')
+      .then((response) => response.text())
+      .then(setSpec);
+  }, []);
+
+  return spec === undefined ? (
+    <div style={{ minHeight: 640 }} />
+  ) : (
+    <RulesBuilder defaultSpec={spec} defaultSpecFileName="cafe.yaml" />
+  );
 }
 ```
 
+Fetching the document in `useEffect` also keeps the component off the server render.
+
 The lint engine imports Node's `path` module. Bundlers that target the browser need it aliased to
 `path-browserify` (Realm's client build already does this).
 
 ### Props
 
-All props are optional.
+`defaultSpec` is required; every other prop is optional.
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `defaultSpec` | `string` | Redocly Museum API | OpenAPI document shown initially |
-| `defaultSpecFileName` | `string` | `museum-api.yaml` | File name shown above the editor |
+| `defaultSpec` | `string` | | OpenAPI document (YAML or JSON text) shown initially |
+| `defaultSpecFileName` | `string` | `openapi.yaml` | File name shown above the editor |
 | `initialRule` | `ConfigurableRule` | `Operation.summary` defined + `maxLength: 20` | Rule loaded into the first card |
 | `initialRuleName` | `string` | `operation-summary` | Name of the first rule (`rule/<name>`) |
 | `onRuleChange` | `(yaml: string, rules: NamedRule[]) => void` | | Called with the generated `redocly.yaml` snippet and the normalized rules on every change |
@@ -115,7 +139,6 @@ Besides the component, the package exports its building blocks:
   problems.
 - `serializeRules(rules)` and `parseImportedRules(yaml)` convert between `NamedRule[]` and a
   `redocly.yaml` snippet.
-- `DEFAULT_SPEC` is the bundled Museum API sample.
 - All public types: `RulesBuilderProps`, `ConfigurableRule`, `NamedRule`, `HostAdapters`,
   `EvaluationResult`, `MatchedNode`, `ProblemInfo`, and the rule-shape types.
 

package/dist/components/RulesBuilder.d.ts

@@ -1,6 +1,6 @@
 import { ConfigurableRule, HostAdapters, NamedRule } from '../types';
 export interface RulesBuilderProps {
-    defaultSpec?: string;
+    defaultSpec: string;
     defaultSpecFileName?: string;
     initialRule?: ConfigurableRule;
     initialRuleName?: string;