Merge pull request #57 from json-schema-tools/fix/general-fixups

Fix/general fixups

Author: BelfordZ

.circleci/config.yml

@@ -87,5 +87,6 @@ workflows:
             - build
       - release:
           filters: *filter-only-master
+          context: sem-rel-json-schema-tools
           requires:
             - hold

package-lock.json

@@ -36,9 +36,10 @@
     ]
   },
   "dependencies": {
-    "@json-schema-tools/transpiler": "^1.5.4",
     "@etclabscore/monaco-add-json-schema-diagnostics": "^1.0.3",
     "@etclabscore/react-monaco-editor": "^1.0.3",
+    "@json-schema-tools/dereferencer": "^1.2.13",
+    "@json-schema-tools/transpiler": "^1.5.4",
     "@material-ui/core": "^4.5.1",
     "@material-ui/icons": "^4.5.1",
     "i18next": "^17.3.0",

package.json

@@ -23,7 +23,7 @@ const LanguageMenu: React.FC = (props) => {
 
   return (
     <>
-      <Tooltip title={t("Change Language")}>
+      <Tooltip title={t("Change Language") as string}>
         <Button onClick={handleClick}>{supportedLanguages[i18n.language]}</Button>
       </Tooltip>
       <Menu

src/containers/LanguageMenu/LanguageMenu.tsx

@@ -10,16 +10,45 @@ import { lightTheme, darkTheme } from "../themes/theme";
 import { useTranslation } from "react-i18next";
 import SplitPane from "react-split-pane";
 import Transpiler, { SupportedLanguages } from "@json-schema-tools/transpiler";
+import Dereferencer from "@json-schema-tools/dereferencer";
 import "./MyApp.css";
 import Editor from "@etclabscore/react-monaco-editor";
 import { addDiagnostics } from "@etclabscore/monaco-add-json-schema-diagnostics";
 
 const languages: SupportedLanguages[] = ["typescript", "golang", "python", "rust"];
 
+const defaultSchema = {
+  title: "example",
+  type: "object",
+  required: ["thing"],
+  properties: {
+    thing: {
+      title: "bar",
+      description: "This is a bar thing",
+      type: "string",
+      enum: [ "one", "two", "three" ]
+    },
+    otherThing: {
+      description: "generated Title when there is none",
+      type: "array",
+      items: {
+        title: "foo",
+        type: "number"
+      }
+    },
+    baz: {
+      "$ref": "#/definitions/baz"
+    }
+  },
+  definitions: {
+    baz: { type: "number", title: "baz" }
+  }
+};
+
 const MyApp: React.FC = () => {
   const darkMode = useDarkMode();
   const [, setIsEditorReady] = useState(false);
-  const [defaultValue] = useState(`{\n  "title": "foo",\n  "type": "string"\n}`);
+  const [defaultValue] = useState(JSON.stringify(defaultSchema, undefined, "  "));
   const [value, setValue] = useState(defaultValue);
   const [results, setResults] = useState("");
   const [languageAnchorEl, setLanguageAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -33,8 +62,11 @@ const MyApp: React.FC = () => {
   function handleTranspile() {
     try {
       const result = JSON.parse(value);
-      const tr = new Transpiler(result);
-      setResults(tr.to(selectedLanguage));
+      const dereffer = new Dereferencer(result);
+      dereffer.resolve().then((schema) => {
+        const tr = new Transpiler(schema);
+        setResults(tr.to(selectedLanguage));
+      });
     } catch (e) {
       console.error(e);
     }
@@ -78,9 +110,9 @@ const MyApp: React.FC = () => {
       <AppBar position="static" color="default" elevation={0}>
         <Toolbar>
           <Grid container alignContent="center" alignItems="center" justify="flex-start">
-            <Typography variant="h6" style={{ paddingRight: "20px" }}>{t("json-schema.tools")}</Typography>
+            <Typography variant="h6" style={{ paddingRight: "20px" }}>{t("json-schema.tools") as string}</Typography>
             <Typography variant="caption" style={{ paddingRight: "5px" }}>
-              {t("playground")}
+              {t("playground") as string}
             </Typography>
           </Grid>
           <Grid container alignContent="center" alignItems="center" justify="flex-end">
@@ -108,15 +140,15 @@ const MyApp: React.FC = () => {
               </Menu>
             </>
             }
-            <Tooltip title={t("json-schema.tools Github")}>
+            <Tooltip title={t("json-schema.tools Github") as string}>
               <IconButton
                 onClick={() =>
-                  window.open("https://github.com/json-schema-tools/playground")
+                  window.open("https://github.com/json-schema-tools/")
                 }>
                 <CodeIcon />
               </IconButton>
             </Tooltip>
-            <Tooltip title={t("Toggle Dark Mode")}>
+            <Tooltip title={t("Toggle Dark Mode") as string}>
               <IconButton onClick={darkMode.toggle}>
                 {darkMode.value ? <Brightness3Icon /> : <WbSunnyIcon />}
               </IconButton>