diff --git a/packages/svelte/README.md b/packages/svelte/README.md new file mode 100644 index 00000000..a7b41f21 --- /dev/null +++ b/packages/svelte/README.md @@ -0,0 +1,127 @@ +

+ +

utterances-svelte-component

+

+ +

+Type safety svelte component for utterances +

+ +
+ +[![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) + +
+ +--- + +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 + + + +``` + +## :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` | `string[]`[^1] | The mapping between blog posts and GitHub issues. One of them[^2] | +| `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!
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! + + + + + +## :bulb: License + +Copyright © 2021-present [TomokiMiyauci](https://github.com/TomokiMiyauci). + +Released under the [MIT](./LICENSE) license diff --git a/packages/svelte/_debug/App.svelte b/packages/svelte/_debug/App.svelte new file mode 100644 index 00000000..813b1b27 --- /dev/null +++ b/packages/svelte/_debug/App.svelte @@ -0,0 +1,8 @@ + + +
+ +
+ diff --git a/packages/svelte/_debug/main.ts b/packages/svelte/_debug/main.ts new file mode 100644 index 00000000..d8200ac4 --- /dev/null +++ b/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 diff --git a/packages/svelte/index.html b/packages/svelte/index.html new file mode 100644 index 00000000..7837e1f6 --- /dev/null +++ b/packages/svelte/index.html @@ -0,0 +1,13 @@ + + + + + + + Svelte + TS + Vite App + + +
+ + + diff --git a/packages/svelte/lib/Utterances.svelte b/packages/svelte/lib/Utterances.svelte new file mode 100644 index 00000000..a930c6de --- /dev/null +++ b/packages/svelte/lib/Utterances.svelte @@ -0,0 +1,32 @@ + + +
diff --git a/packages/svelte/lib/index.ts b/packages/svelte/lib/index.ts new file mode 100644 index 00000000..8eba0a61 --- /dev/null +++ b/packages/svelte/lib/index.ts @@ -0,0 +1,3 @@ +import Utterances from './Utterances.svelte' + +export { Utterances } diff --git a/packages/svelte/package.json b/packages/svelte/package.json new file mode 100644 index 00000000..dfb16a07 --- /dev/null +++ b/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": "development.operation6.6.6@gmail.com", + "url": "https://miyauchi.dev/" + }, + "repository": { + "type": "git", + "url": "https://github.com/TomokiMiyauci/utterances-component.git", + "directory": "packages/svelte" + } +} diff --git a/packages/svelte/svelte.config.js b/packages/svelte/svelte.config.js new file mode 100644 index 00000000..3630bb39 --- /dev/null +++ b/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() +} diff --git a/packages/svelte/tsconfig.json b/packages/svelte/tsconfig.json new file mode 100644 index 00000000..20ebf16e --- /dev/null +++ b/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" + ] +} diff --git a/packages/svelte/vite.config.ts b/packages/svelte/vite.config.ts new file mode 100644 index 00000000..ab0e161a --- /dev/null +++ b/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' + } + } + } +})