Initial commit.

masterT · Feb 16, 2022 · 7daa6c8 · 7daa6c8
commit 7daa6c8
Show file tree

Hide file tree

Showing 26 changed files with 2,536 additions and 0 deletions.
diff --git a/.github/assets/screenshot.png b/.github/assets/screenshot.png
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Simon Thiboutôt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,64 @@
+# JSON:API Browser
+
+Browser for web API implementing [JSON:API v1.0](https://jsonapi.org/).
+
+**Stack**
+
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vue.js 3](https://vuejs.org/)
+- [Vite](https://vitejs.dev/)
+- [WindiCSS](https://windicss.org/)
+- [jsonapi-metal-client](https://github.com/masterT/jsonapi-metal-client)
+
+## Demo
+
+[https://masterT.github.com/jsonapi-browser](https://masterT.github.com/jsonapi-browser)
+
+![screenshot.png](.github/assets/screenshot.png)
+
+## Development
+
+Requirements:
+
+- Yarn
+- Node.js
+
+### Project Setup
+
+Install dependencies:
+
+```shell
+yarn install
+```
+
+### Compiles and hot-reloads for development
+
+```shell
+yarn run dev
+```
+
+### Build
+
+Build the application:
+
+```shell
+yarn run build
+```
+
+Then run the preview server:
+
+```shell
+yarn run preview
+```
+
+## Deployment
+
+Deploy on [GitHub pages](https://pages.github.com/):
+
+```shell
+./deploy.sh
+```
+
+## License
+
+[MIT](./LICENSE)
diff --git a/deploy.sh b/deploy.sh
@@ -0,0 +1,25 @@
+#!/usr/bin/env sh
+
+# abort on errors
+set -e
+
+# build
+yarn run build
+
+# navigate into the build output directory
+cd dist
+
+# if you are deploying to a custom domain
+# echo 'www.example.com' > CNAME
+
+git init
+git add -A
+git commit -m 'Deploy.'
+
+# if you are deploying to https://<USERNAME>.github.io
+# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git main
+
+# if you are deploying to https://<USERNAME>.github.io/<REPO>
+git push -f [email protected]:masterT/jsonapi-browser.git main:gh-pages
+
+cd -
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JSON:API Browser</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "jsonapi-browser",
+  "version": "0.0.1",
+  "description": "Browser for web API implementing JSON:API v1.0.",
+  "private": true,
+  "repository": "https://github.com/masterT/jsonapi-browser",
+  "author": "Simon Thiboutôt <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "jsonapi-metal-client": "^0.0.1",
+    "vue": "^3.2.25",
+    "vue-router": "4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.2",
+    "@vitejs/plugin-legacy": "^1.7.1",
+    "@vitejs/plugin-vue": "^2.0.0",
+    "babel-loader": "^8.2.3",
+    "typescript": "^4.4.4",
+    "vite": "^2.7.2",
+    "vite-plugin-windicss": "^1.7.0",
+    "vue-loader": "^16.8.3",
+    "vue-tsc": "^0.29.8",
+    "windicss": "^3.4.3"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import TheHeader from './components/TheHeader.vue'
+</script>
+
+<template>
+  <TheHeader />
+  <router-view />
+</template>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/BrowserControls.vue b/src/components/BrowserControls.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps<{
+  location: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'navigate', url: string): void
+  (e: 'update:location', url: string): void
+}>()
+
+</script>
+
+<template>
+  <div class="flex items-center">
+    <form @submit.prevent="$emit('navigate', location)" class="flex-1">
+      <input
+        class="w-full"
+        placeholder="JSON:API endpoint URL"
+        type="text"
+        :value="location"
+        @input="$emit('update:location', ($event.target as HTMLInputElement).value)"/>
+    </form>
+  </div>
+</template>
diff --git a/src/components/JsonApiDocument/Description.ts b/src/components/JsonApiDocument/Description.ts
@@ -0,0 +1,89 @@
+import { h, FunctionalComponent } from 'vue'
+import { JsonApi } from 'jsonapi-metal-client'
+
+const Description: FunctionalComponent<
+  { document: JsonApi.Specification.Document }
+> = (props) => {
+  // TODO: Render slot with param.
+  let description = undefined
+  // Data document
+  if (JsonApi.Specification.TypeGuards.isDataDocument(props.document)) {
+    // Individual resource.
+    if (JsonApi.Specification.TypeGuards.isFetchResourceIndividualResponse(props.document)) {
+      if (props.document.data === null) {
+        return h('span', 'Resource not created')
+      } else {
+        return h('span', [
+          'Resource ',
+          h('b', `${props.document.data.type} #${props.document.data.id}`)
+        ])
+      }
+      return h('span', description)
+    }
+
+    // Collection resource.
+    if (JsonApi.Specification.TypeGuards.isFetchResourceCollectionResponse(props.document)) {
+      const types: string[] = []
+      props.document.data.forEach((resourceObject) => {
+        if (!types.includes(resourceObject.type)) {
+          types.push(resourceObject.type)
+        }
+      })
+      if (types.length === 0) {
+        return h('span', 'Resource collection empty')
+      } else {
+        return h('span', [
+          'Resource collection of ',
+          h('b', `${types.join(', ')}`)
+        ])
+      }
+    }
+
+    // Relationship to-many.
+    if (JsonApi.Specification.TypeGuards.isFetchRelationshipToManyResponse(props.document)) {
+      const types: string[] = []
+      props.document.data.forEach((resourceIdentifierObject) => {
+        if (!types.includes(resourceIdentifierObject.type)) {
+          types.push(resourceIdentifierObject.type)
+        }
+      })
+      if (types.length === 0) {
+        return h('span', 'Relationship to-many empty')
+      } else {
+        return h('span', [
+          'Relationship to-many of ',
+          h('b', `${types.join(', ')}`)
+        ])
+      }
+    }
+
+    // Relationship to-one.
+    if (JsonApi.Specification.TypeGuards.isFetchRelationshipToOneResponse(props.document)) {
+      const types: string[] = []
+      if (props.document.data === null) {
+        return h('span', 'Relationship to-one empty')
+      } else {
+        return h('span', [
+          'Relationship to-one of ',
+          h('b', props.document.data.type)
+        ])
+      }
+    }
+
+    return h('span', 'Data document')
+  }
+
+  // Meta document
+  if (JsonApi.Specification.TypeGuards.isMetaDocument(props.document)) {
+    return h('span', 'Meta document')
+  }
+
+  // Error document
+  if (JsonApi.Specification.TypeGuards.isErrorDocument(props.document)) {
+    return h('span', 'Error document')
+  }
+
+  return h('span', 'Unkown JSON:API document.')
+}
+
+export default Description
diff --git a/src/components/JsonApiDocument/Source.ts b/src/components/JsonApiDocument/Source.ts
@@ -0,0 +1,40 @@
+import { tokenize, Token } from '../../utils/JsonApiDocumentTokenizer'
+import { h, FunctionalComponent } from 'vue'
+import { JsonApi } from 'jsonapi-metal-client'
+
+const Source: FunctionalComponent<
+  { document: JsonApi.Specification.Document },
+  { navigate: (link: string) => void }
+> = (props, { emit }) => {
+
+  const tokens = tokenize(props.document, 2)
+
+  return h(
+    'pre',
+    {
+      class: 'overflow-y-auto text-xs text-gray-700'
+    },
+    tokens.map((token: Token) => {
+      switch (token.type) {
+        case 'text':
+          return h('span', token.value)
+        case 'link':
+          return h(
+            'a',
+            {
+              href: token.value,
+              onClick: (event: Event) => {
+                emit('navigate', token.value)
+                event.preventDefault()
+              }
+            },
+            token.value
+          )
+        default:
+          throw new Error('Invalid token')
+      }
+    })
+  )
+}
+
+export default Source
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="md:container md:mx-auto my-6 px-1">
+    <header class="flex justify-between items-baseline">
+      <h1 class="sm:text-5xl text-2xl">
+        JSON:API Browser
+      </h1>
+      <nav>
+        <ul class="flex">
+          <li class="mr-6 text-lg font-medium">
+            <router-link to="/">Browser</router-link>
+          </li>
+          <li class="mr-6 text-lg font-medium">
+            <router-link to="/about">About</router-link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  </div>
+</template>
diff --git a/src/composables/useJsonApiBrowserHistory.ts b/src/composables/useJsonApiBrowserHistory.ts
@@ -0,0 +1,44 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+type JsonApiBrowserHistoryState = {
+  type: 'HISTORY_STATE_TYPE',
+  location: string
+}
+
+const isJsonApiBrowserHistoryState = function (object: any): object is JsonApiBrowserHistoryState {
+  return typeof object === 'object'
+    && object !== null
+    && object.type === 'HISTORY_STATE_TYPE'
+    && typeof object.location === 'string'
+}
+
+export function useJsonApiBrowserHistory(
+  onHistoryChange: (location: string) => void
+) {
+  function pushState (location: string) {
+    window.history.pushState({ type: 'HISTORY_STATE_TYPE', location }, '')
+  }
+
+  function onPopState (event: PopStateEvent) {
+    if (isJsonApiBrowserHistoryState(event.state)) {
+      onHistoryChange(event.state.location)
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('popstate', onPopState)
+    // Handle browser refresh.
+    if (isJsonApiBrowserHistoryState(window.history.state)) {
+      console.log('Handle browser refresh')
+      onHistoryChange(window.history.state.location)
+    }
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('popstate', onPopState)
+  })
+
+  return {
+    pushState
+  }
+}