✨ (svelte) Add basic Utterances compponent

packages/svelte/README.md

@@ -0,0 +1,127 @@
+<p align="center">
+
+  <h1 align="center">utterances-svelte-component</h1>
+</p>
+
+<p align="center">
+Type safety svelte component for utterances
+</p>
+
+<div align="center">
+
+[![test](https://github.com/TomokiMiyauci/utterances-svelte-component/actions/workflows/test.yml/badge.svg)](https://github.com/TomokiMiyauci/utterances-svelte-component/actions/workflows/test.yml)
+[![GitHub release](https://img.shields.io/github/release/TomokiMiyauci/utterances-svelte-component.svg)](https://github.com/TomokiMiyauci/utterances-svelte-component/releases)
+![npm download](https://img.shields.io/npm/dw/utterances-svelte-component?color=blue)
+
+![GitHub (Pre-)Release Date](https://img.shields.io/github/release-date-pre/TomokiMiyauci/utterances-svelte-component)
+[![dependencies Status](https://status.david-dm.org/gh/TomokiMiyauci/utterances-svelte-component.svg)](https://david-dm.org/TomokiMiyauci/utterances-svelte-component)
+[![codecov](https://codecov.io/gh/TomokiMiyauci/utterances-svelte-component/branch/main/graph/badge.svg?token=SPAi5Pv2wd)](https://codecov.io/gh/TomokiMiyauci/utterances-svelte-component)
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/f43b1c317e11445399d85ce6efc06504)](https://www.codacy.com/gh/TomokiMiyauci/utterances-svelte-component/dashboard?utm_source=github.com&utm_medium=referral&utm_content=TomokiMiyauci/utterances-svelte-component&utm_campaign=Badge_Grade)
+![npm type definitions](https://img.shields.io/npm/types/utterances-svelte-component)
+![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)
+![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat)
+![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
+
+</div>
+
+---
+
+Svelte component for [utterances](https://utteranc.es/) 🔮
+
+Utterances is a lightweight comments widget built on GitHub issues, for blog comments, wiki pages and more.
+
+## :sparkles: Features
+
+- :books: Pure TS svelte provides type definition
+- :earth_americas: Multiple modules, providing `ES modules` and `Commonjs`
+- :package: Optimized, super slim size
+
+## :zap: Quick view
+
+```html
+<script lang="ts">
+  import { Utterances } from 'utterances-svelte-component'
+</script>
+
+<Utterances
+  repo="TomokiMiyauci/utterances-component"
+  theme="github-dark"
+  issueTerm="pathname"
+/>
+```
+
+## :dizzy: Install
+
+### :package: Node.js
+
+```bash
+npm i utterances-svelte-component
+or
+yarn add utterances-svelte-component
+```
+
+### :globe_with_meridians: Browser
+
+The module that bundles the dependencies is obtained from
+[skypack](https://www.skypack.dev/view/utterances-svelte-component).
+
+import like this:
+
+```tsx
+import { Utterances } from 'https://cdn.skypack.dev/utterances-svelte-component'
+```
+
+## API
+
+### Props
+
+It has a strict type definition.
+No default value is set to respect the original behavior.
+
+[Official document](https://utteranc.es/)
+
+| Name          | Type                         | Description                                                                                        |
+| ------------- | ---------------------------- | -------------------------------------------------------------------------------------------------- |
+| `repo`        | `${String}/${String}`        | Repository for Utterances to connect to. Expected value: `username/repo`                           |
+| `theme`       | `Theme`                      | The Utterance theme.                                                                               |
+| `label`       | `string?`                    | Choose the label that will be assigned to issues created by Utterances.                            |
+| `issueTerm`   | `Term` &#124; `string[]`[^1] | The mapping between blog posts and GitHub issues. <td rowspan="2">One of them[^2]</td>             |
+| `issueNumber` | `number`                     | You configure Utterances to load a specific issue by number. Issues are not automatically created. |
+
+```ts
+declare type Theme =
+  | 'github-light'
+  | 'github-dark'
+  | 'preferred-color-scheme'
+  | 'github-dark-orange'
+  | 'icy-dark'
+  | 'dark-blue'
+  | 'photon-dark'
+  | 'boxy-light'
+declare type Term = 'pathname' | 'url' | 'title' | 'og:title'
+```
+
+[^1]: If you chose "Issue title contains specific term", specify the specific term as string array.
+[^2]: `issueTerm` and `issueNumber` are exclusive. TypeScript will prompt you to specify one or the other.
+
+## :handshake: Contributing
+
+Contributions, issues and feature requests are welcome!<br />Feel free to check
+[issues](https://github.com/TomokiMiyauci/utterance-component/issues).
+
+[Contributing guide](./.github/CONTRIBUTING.md)
+
+## :seedling: Show your support
+
+Give a ⭐️ if this project helped you!
+
+<a href="https://www.patreon.com/tomoki_miyauci">
+  <img src="https://c5.patreon.com/external/logo/[email protected]" width="160">
+</a>
+
+## :bulb: License
+
+Copyright © 2021-present [TomokiMiyauci](https://github.com/TomokiMiyauci).
+
+Released under the [MIT](./LICENSE) license

packages/svelte/_debug/App.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import Utterances from '../lib/Utterances.svelte'
+</script>
+
+<main>
+  <Utterances repo="TomokiMiyauci/utterances-component" issueTerm="pathname"  theme="boxy-light" />
+</main>
+

packages/svelte/_debug/main.ts

@@ -0,0 +1,7 @@
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app')
+})
+
+export default app

packages/svelte/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>Svelte + TS + Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/_debug/main.ts"></script>
+  </body>
+</html>

packages/svelte/lib/Utterances.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { createScriptElement, putChildElement } from '../../../util'
+  import  type { Repo, Theme,  Issue } from '../../../types'
+
+  type $$Props = Issue
+
+  export let repo: Repo
+  export let theme: Theme
+  export const label: string = undefined
+  export let issue: Issue = (() => {
+    return {
+      issueTerm: $$props.issueTerm,
+      issueNumber: $$props.issueNumber
+    } as Issue
+  })()
+
+
+  let divRef: HTMLDivElement;
+  onMount(() => {
+    const scriptEl = createScriptElement({
+      repo,
+      theme,
+      label,
+      ...issue,
+    })
+
+    divRef = putChildElement(divRef, scriptEl)
+  });
+</script>
+
+<div bind:this={divRef} />

packages/svelte/lib/index.ts

@@ -0,0 +1,3 @@
+import Utterances from './Utterances.svelte'
+
+export { Utterances }

packages/svelte/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "utterances-svelte-component",
+  "description": "Type safety svalte component for utterances",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs.js",
+      "import": "./dist/index.es.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "svelte": "lib/Utterances.svelte",
+  "scripts": {
+    "cz": "yarn --cwd ../.. cz",
+    "commit": "yarn cz",
+    "prepare": "yarn --cwd ../..",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.11",
+    "@tsconfig/svelte": "^2.0.1",
+    "svelte": "^3.37.0",
+    "svelte-check": "^2.1.0",
+    "svelte-preprocess": "^4.7.2",
+    "tslib": "^2.2.0"
+  },
+  "author": {
+    "name": "TomokiMiyauci",
+    "email": "[email protected]",
+    "url": "https://miyauchi.dev/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TomokiMiyauci/utterances-component.git",
+    "directory": "packages/svelte"
+  }
+}

packages/svelte/svelte.config.js

@@ -0,0 +1,7 @@
+import sveltePreprocess from 'svelte-preprocess'
+
+export default {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: sveltePreprocess()
+}

packages/svelte/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "baseUrl": ".",
+    "allowJs": false
+  },
+  "include": [
+    "lib/**/*.d.ts",
+    "slibrc/**/*.ts",
+    "lib/**/*.js",
+    "lib/**/*.svelte"
+  ]
+}

packages/svelte/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [svelte()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'lib/index.ts'),
+      formats: ['cjs', 'es'],
+      fileName: 'index'
+    },
+    rollupOptions: {
+      external: ['svelte/internal', 'svelte'],
+      output: {
+        format: 'cjs'
+      }
+    }
+  }
+})