Add @tomic/svelte copy #688

browser/svelte/.eslintrc.cjs

@@ -0,0 +1,96 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+    'plugin:@typescript-eslint/eslint-recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'prettier', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+  ],
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
+    node: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+      arrowFunctions: true,
+    },
+    // Next two lines enable deeper TS type checking
+    // https://typescript-eslint.io/docs/linting/typed-linting/
+    tsconfigRootDir: __dirname,
+  },
+  plugins: ['@typescript-eslint', 'prettier'],
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.svelte', '.ts', '.tsx'],
+        paths: ['./src'],
+      },
+    },
+  },
+  rules: {
+    // Existing rules
+    'comma-dangle': 'off', // https://eslint.org/docs/rules/comma-dangle
+    'function-paren-newline': 'off', // https://eslint.org/docs/rules/function-paren-newline
+    'global-require': 'off', // https://eslint.org/docs/rules/global-require
+    'import/no-dynamic-require': 'off', // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md
+    'class-methods-use-this': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { varsIgnorePattern: '^_', argsIgnorePattern: '^_' },
+    ],
+    'import/prefer-default-export': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'no-console': ['error', { allow: ['error', 'warn'] }],
+    'padding-line-between-statements': [
+      'error',
+      {
+        blankLine: 'always',
+        next: 'return',
+        prev: '*',
+      },
+      {
+        blankLine: 'always',
+        next: 'export',
+        prev: '*',
+      },
+      {
+        blankLine: 'always',
+        next: 'multiline-block-like',
+        prev: '*',
+      },
+      {
+        blankLine: 'always',
+        next: '*',
+        prev: 'multiline-block-like',
+      },
+      {
+        blankLine: 'any',
+        next: 'export',
+        prev: 'export',
+      },
+    ],
+    '@typescript-eslint/explicit-member-accessibility': 'error',
+    eqeqeq: 'error',
+    'no-unused-expressions': [
+      'error',
+      { allowShortCircuit: true, allowTaggedTemplates: true },
+    ],
+    // This has a bug, so we use typescripts version
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': ['error'],
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    'no-eval': 'error',
+    'no-implied-eval': 'error',
+    '@typescript-eslint/member-ordering': 'error',
+  },
+};

browser/svelte/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+dist/*
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

browser/svelte/.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "useTabs": false,
+  "arrowParens": "avoid",
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "jsdocParser": true
+}

browser/svelte/.trunk/.gitignore

@@ -0,0 +1,7 @@
+*out
+*logs
+*actions
+*notifications
+plugins
+user_trunk.yaml
+user.yaml

browser/svelte/.trunk/configs/.markdownlint.yaml

@@ -0,0 +1,10 @@
+# Autoformatter friendly markdownlint config (all formatting rules disabled)
+default: true
+blank_lines: false
+bullet: false
+html: false
+indentation: false
+line_length: false
+spaces: false
+url: false
+whitespace: false

browser/svelte/.trunk/trunk.yaml

@@ -0,0 +1,26 @@
+version: 0.1
+cli:
+  version: 1.3.1
+plugins:
+  sources:
+    - id: trunk
+      ref: v0.0.8
+      uri: https://github.com/trunk-io/plugins
+lint:
+  enabled:
+    - [email protected]
+    - [email protected]
+    - git-diff-check
+    - [email protected]
+    - [email protected]
+runtimes:
+  enabled:
+    - [email protected]
+    - [email protected]
+actions:
+  disabled:
+    - trunk-announce
+    - trunk-check-pre-push
+    - trunk-fmt-pre-commit
+  enabled:
+    - trunk-upgrade-available

browser/svelte/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ontola (Argu B.V.)
+
+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.

browser/svelte/README.md

@@ -0,0 +1,106 @@
+# @tomic/svelte
+
+An implementation of Atomic Data for [Svelte](https://svelte.dev/).
+This library is still at an early stage and the API is subject to change.
+
+[See open source example project built with @tomic/svelte.](https://github.com/ontola/wonenatthepark)
+
+## Quick Examples
+
+### Getting a resource and displaying one of its properties
+```html
+  <script lang="ts">
+    import { getResource, getValue } from '@tomic/svelte';
+    import { urls } from '@tomic/lib';
+
+    const resource = getResource('https://example.com/');
+    const name = getValue<string>(resource, urls.properties.name);
+  </script>
+
+  <h1>{$name}</h1>
+```
+
+### Changing the value of a property with an input field
+```html
+  <script lang="ts">
+    import { getResource, getValue, setValue } from '@tomic/svelte';
+    import { urls } from '@tomic/lib';
+
+    const resource = getResource('https://example.com/');
+    const name = getValue<string>(resource, urls.properties.name);
+  </script>
+
+  <input bind:value={$name} />
+```
+
+## Getting started
+
+Install the library with your prefered package manager: <br />
+```
+npm install -S @tomic/svelte @tomic/lib
+```
+```
+yarn add @tomic/svelte @tomic/lib
+```
+```
+pnpm add @tomic/svelte @tomic/lib
+```
+
+Initialise the store
+```html
+// App.svelte
+
+<script lang="ts">
+  import { initStore } from '@tomic/svelte';
+  import { Store } from '@tomic/lib';
+
+  onMount(() => {
+    // This is where you configure your atomic data store.
+    const store = new Store();
+    initStore(store);
+  })
+</script>
+
+// do sveltey things
+```
+
+You can now acces this store from any component in your app with the store store.
+```html
+// Some random component.svelte
+
+<script lang="ts">
+  import { store } from '@tomic/svelte';
+
+  const resource = $store.getResourceLoading('https://atomicdata.dev/documents/tgzamh5hk2t');
+</script>
+```
+
+However this resource does not update when some of its data changes somewhere else in your app.
+That's where the `getResource` and `getValue` functions come in handy.
+
+To get a value and display it in your component we first retrieve (or create) a resource from the store with `getResource` and then get it's value with `getValue`.
+
+```html
+// Some random component.svelte
+
+<script lang="ts">
+  import { getResource, getValue } from '@tomic/svelte';
+  import { urls } from '@tomic/lib';
+
+  const resource = getResource('https://example.com/');
+  const name = getValue<string>(resource, urls.properties.name);
+</script>
+
+<main>
+  <h1>{$name}</h1>
+  ...
+```
+
+Updating values of a resource is super simple, just do what you would normaly do with a writable svelte store:
+```ts
+const value = getValue<string>(resource, urls.properties.name);
+
+$value = "New Value";
+```
+
+The value now updates and changes will permeate through the store.

browser/svelte/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@tomic/svelte",
+  "description": "Atomic Data Svelte library",
+  "author": "Polle Pas",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.35.1",
+  "type": "module",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.js",
+  "typings": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:watch": "tsc && vite build --watch",
+    "lint": "eslint ./src --ext .js,.svelte,.ts,.tsx",
+    "lint-fix": "eslint ./src --ext .js,.svelte,.ts,.tsx --fix",
+    "test": "vitest",
+    "coverage": "vitest --coverage"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^10.0.1",
+    "@types/node": "^18.11.17",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.1",
+    "rollup-plugin-typescript-paths": "^1.4.0",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vitest": "^0.26.1"
+  },
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@tomic/lib": "^0.35.0-beta.1",
+    "eslint": "^8.30.0",
+    "svelte": "^3.55.0"
+  },
+  "peerDependencies": {
+    "@tomic/lib": "0.35.x"
+  }
+}