initial commit

Author: Polleps

.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',
+  },
+};

.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?

.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
+}

README.md

@@ -0,0 +1,104 @@
+# @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.
+
+## 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.

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@tomic/svelte",
+  "description": "Atomic Data Svelte library",
+  "author": "Polle Pas",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/main.es.js",
+      "require": "./dist/main.cjs.js"
+    }
+  },
+  "main": "./dist/main.cjs.js",
+  "module": "./dist/main.es.js",
+  "typings": "./dist/main.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": "pnpm@7.13.3",
+  "dependencies": {
+    "@tomic/lib": "^0.34.0",
+    "eslint": "^8.30.0",
+    "svelte": "^3.55.0"
+  }
+}