Update examples with new LDkit version (#42)

karelklima · Mar 10, 2023 · 67f18d4 · 67f18d4
1 parent 0e0c6de
commit 67f18d4
Show file tree

Hide file tree

Showing 41 changed files with 316 additions and 196 deletions.
diff --git a/examples/basic/main.ts b/examples/basic/main.ts
@@ -37,18 +37,26 @@ console.log(ada?.birthDate); // Date object of 1815-12-10
 const count = await Persons.count();
 console.log(count); // number
 
+// The following code will not work on DBPedia as it needs write permissions
+
 // Insert a new person
+/*
 Persons.insert({
   $id: "http://dbpedia.org/resource/Alan_Turing",
   name: "Alan Turing",
   birthDate: new Date("1912-06-23"),
 });
+*/
 
 // Modify a person's name
+/*
 Persons.update({
   $id: "http://dbpedia.org/resource/Alan_Turing",
   name: "Not Alan Turing",
 });
+*/
 
 // Delete a person
+/*
 Persons.delete("http://dbpedia.org/resource/Alan_Turing");
+*/
diff --git a/examples/react-bulletin-boards/index.html b/examples/react-bulletin-boards/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Úřední desky</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/examples/react-bulletin-boards/package.json b/examples/react-bulletin-boards/package.json
@@ -1,25 +1,29 @@
 {
   "author": "Karel Klima <[email protected]> (https://karelklima.com)",
   "license": "MIT",
-  "source": "src/index.html",
+  "type": "module",
   "scripts": {
-    "start": "parcel src/index.html"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@comunica/query-sparql": "^2.4.3",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@mui/icons-material": "^5.10.6",
-    "@mui/material": "^5.10.7",
-    "ldkit": "^0.6.3",
+    "@comunica/query-sparql": "^2.6.9",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.12",
+    "ldkit": "^0.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
-    "react-router-dom": "^6.4.1"
+    "react-router-dom": "^6.8.2"
   },
   "devDependencies": {
-    "events": "^3.3.0",
-    "parcel": "^2.7.0",
-    "process": "^0.11.10"
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
   }
 }
diff --git a/...ct-bulletin-boards/src/components/App.tsx → examples/react-bulletin-boards/src/App.tsx b/...ct-bulletin-boards/src/components/App.tsx → examples/react-bulletin-boards/src/App.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Board } from "./Board";
 import { Form } from "./Form";
 
-import { CssBaseline, AppBar, Toolbar, Typography, Box } from "@mui/material";
+import { AppBar, Box, CssBaseline, Toolbar, Typography } from "@mui/material";
 import { BrowserRouter } from "react-router-dom";
 
 export const App = () => (

diff --git a/...-bulletin-boards/src/components/Board.tsx → examples/react-bulletin-boards/src/Board.tsx b/...-bulletin-boards/src/components/Board.tsx → examples/react-bulletin-boards/src/Board.tsx
@@ -1,22 +1,22 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "@emotion/styled";
 
 import {
-  InformationInterface,
   createInfosResource,
   DEFAULT_BOARD_IRI,
-} from "../store";
+  InformationInterface,
+} from "./store";
 import {
-  TableContainer,
+  Alert,
+  Box,
+  IconButton,
+  Paper,
   Table,
+  TableBody,
+  TableCell,
+  TableContainer,
   TableHead,
   TableRow,
-  TableCell,
-  TableBody,
-  Paper,
-  IconButton,
-  Alert,
-  Box,
 } from "@mui/material";
 import LinkIcon from "@mui/icons-material/Link";
 import { useSearchParams } from "react-router-dom";
@@ -81,9 +81,7 @@ const BoardContent: React.FC<{ iri: string }> = ({ iri }) => {
           </TableRow>
         </TableHead>
         <TableBody>
-          {informations.map((item, index) => (
-            <Item item={item} key={index} />
-          ))}
+          {informations.map((item, index) => <Item item={item} key={index} />)}
         </TableBody>
       </Table>
     </TableContainer>

diff --git a/...t-bulletin-boards/src/components/Form.tsx → examples/react-bulletin-boards/src/Form.tsx b/...t-bulletin-boards/src/components/Form.tsx → examples/react-bulletin-boards/src/Form.tsx
@@ -1,7 +1,7 @@
 import React, { FormEvent, useEffect, useRef } from "react";
 
-import { DEFAULT_BOARD_IRI } from "../store";
-import { Grid, TextField, Button } from "@mui/material";
+import { DEFAULT_BOARD_IRI } from "./store";
+import { Button, Grid, TextField } from "@mui/material";
 import { useSearchParams } from "react-router-dom";
 
 type Inputs = {

diff --git a/examples/react-bulletin-boards/src/index.html b/examples/react-bulletin-boards/src/index.html
diff --git a/examples/react-bulletin-boards/src/index.tsx b/examples/react-bulletin-boards/src/index.tsx
diff --git a/examples/react-bulletin-boards/src/main.tsx b/examples/react-bulletin-boards/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import { App } from "./App";
+
+ReactDOM.createRoot(document.getElementById("app") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/react-bulletin-boards/src/store.ts b/examples/react-bulletin-boards/src/store.ts
@@ -1,33 +1,44 @@
-import { type Context, type SchemaInterface, createResource, createNamespace } from "ldkit";
+import {
+  type Context,
+  createNamespace,
+  createResource,
+  type SchemaInterface,
+} from "ldkit";
 import { dcterms, schema, xsd } from "ldkit/namespaces";
 import { QueryEngine as Comunica } from "@comunica/query-sparql";
 
-const time = createNamespace({
-  iri: "http://www.w3.org/2006/time#",
-  prefix: "time:",
-  terms: ["Instant", "inXSDDate", "inXSDDateTimeStamp"],
-} as const);
+const time = createNamespace(
+  {
+    iri: "http://www.w3.org/2006/time#",
+    prefix: "time:",
+    terms: ["Instant", "inXSDDate", "inXSDDateTimeStamp"],
+  } as const,
+);
 
-const desky = createNamespace({
-  iri: "https://slovník.gov.cz/datový/ofn-úřední-desky/pojem/",
-  prefix: "desky:",
-  terms: [
-    "úřední-deska",
-    "stránka-zveřejnění",
-    "informace-zveřejněná-na-úřední-desce",
-    "vyvěšení-informace",
-    "schválení-informace",
-    "relevantní-do",
-    "číslo-jednací",
-    "spisová-značka-spisu",
-  ],
-} as const);
+const desky = createNamespace(
+  {
+    iri: "https://slovník.gov.cz/datový/ofn-úřední-desky/pojem/",
+    prefix: "desky:",
+    terms: [
+      "úřední-deska",
+      "stránka-zveřejnění",
+      "informace-zveřejněná-na-úřední-desce",
+      "vyvěšení-informace",
+      "schválení-informace",
+      "relevantní-do",
+      "číslo-jednací",
+      "spisová-značka-spisu",
+    ],
+  } as const,
+);
 
-const sb504_2004 = createNamespace({
-  iri: "https://slovník.gov.cz/legislativní/sbírka/500/2004/pojem/",
-  prefix: "sb504_2004:",
-  terms: ["vyvěšení-informace"],
-} as const);
+const sb504_2004 = createNamespace(
+  {
+    iri: "https://slovník.gov.cz/legislativní/sbírka/500/2004/pojem/",
+    prefix: "sb504_2004:",
+    terms: ["vyvěšení-informace"],
+  } as const,
+);
 
 const InstantSchema = {
   "@type": time.Instant,

diff --git a/.../react-bulletin-boards/src/react-app.d.ts → ...s/react-bulletin-boards/src/vite-env.d.ts b/.../react-bulletin-boards/src/react-app.d.ts → ...s/react-bulletin-boards/src/vite-env.d.ts
diff --git a/examples/react-bulletin-boards/tsconfig.json b/examples/react-bulletin-boards/tsconfig.json
@@ -1,8 +1,21 @@
 {
   "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve",
-    "esModuleInterop": true
+    "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/examples/react-bulletin-boards/tsconfig.node.json b/examples/react-bulletin-boards/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/examples/react-bulletin-boards/vite.config.ts b/examples/react-bulletin-boards/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/examples/react-dbpedia-actors/index.html b/examples/react-dbpedia-actors/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>LDkit | React DBpedia Actors example</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/examples/react-dbpedia-actors/package.json b/examples/react-dbpedia-actors/package.json
@@ -1,21 +1,26 @@
 {
   "author": "Karel Klima <[email protected]> (https://karelklima.com)",
   "license": "MIT",
-  "source": "src/index.html",
+  "type": "module",
   "scripts": {
-    "start": "parcel src/index.html"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@mui/material": "^5.10.5",
-    "ldkit": "^0.6.3",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/material": "^5.11.12",
+    "ldkit": "^0.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "events": "^3.3.0",
-    "parcel": "^2.7.0",
-    "process": "^0.11.10"
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0",
+    "vite-plugin-node-polyfills": "^0.7.0"
   }
 }
diff --git a/...t-dbpedia-actors/src/components/Actor.tsx → examples/react-dbpedia-actors/src/Actor.tsx b/...t-dbpedia-actors/src/components/Actor.tsx → examples/react-dbpedia-actors/src/Actor.tsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
-import { createLocalizedActorResource, ActorInterface } from "../store";
+import { ActorInterface, createLocalizedActorResource } from "./store";
 import { Grid, Typography } from "@mui/material";
 
 type ActorProps = {

diff --git a/...-dbpedia-actors/src/components/Actors.tsx → examples/react-dbpedia-actors/src/Actors.tsx b/...-dbpedia-actors/src/components/Actors.tsx → examples/react-dbpedia-actors/src/Actors.tsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
-import { Container, Grid, TextField, MenuItem } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Container, Grid, MenuItem, TextField } from "@mui/material";
 
-import { favouriteActors, languages } from "../store";
+import { favouriteActors, languages } from "./store";
 import { Actor } from "./Actor";
 
 export const Actors: React.FC = () => {

diff --git a/...act-dbpedia-actors/src/components/App.tsx → examples/react-dbpedia-actors/src/App.tsx b/...act-dbpedia-actors/src/components/App.tsx → examples/react-dbpedia-actors/src/App.tsx
@@ -2,12 +2,12 @@ import React from "react";
 import { Actors } from "./Actors";
 
 import {
-  CssBaseline,
   AppBar,
-  Toolbar,
-  Typography,
   Box,
   Button,
+  CssBaseline,
+  Toolbar,
+  Typography,
 } from "@mui/material";
 
 export const App = () => (

diff --git a/examples/react-dbpedia-actors/src/index.html b/examples/react-dbpedia-actors/src/index.html