chore: add playground (#29)

* chore: add playground

* update

Author: ota-meshi

README.md

@@ -7,6 +7,12 @@
 </p>
 <p align="center">ESLint plugin for internationalization with Svelte</p>
 
+<h2 align="center">
+
+[Online Demo](https://eslint-online-playground.netlify.app/#https://github.com/intlify/eslint-plugin-svelte/tree/main/playground)
+
+</h2>
+
 ## :book: Documentation
 
 See [here](https://github.com/intlify/eslint-plugin-svelte/blob/main/docs/README.md)

docs/README.md

@@ -2,18 +2,6 @@
 
 @intlify/eslint-plugin-svelte is ESLint plugin for internationalization with Svelte. It easily integrates some localization features to your Svelte Application.
 
-Go to [Get Started](./started.md)
+- 👉 Go to [Get Started](./started.md)
 
-<eslint-code-block :rules="{ '@intlify/svelte/no-raw-text': 'error' }">
-
-<!-- eslint-skip -->
-
-```html
-<!-- ✓ GOOD -->
-<h2>{$_('page.subtitle')}</h2>
-
-<!-- ✗ BAD -->
-<p>Plain text cannot be replaced by multiple languages.</p>
-```
-
-</eslint-code-block>
+- 👉 Try it out in [Online Demo](https://eslint-online-playground.netlify.app/#https://github.com/intlify/eslint-plugin-svelte/tree/main/playground)

docs/rules/README.md

@@ -1,6 +1,6 @@
 # Available Rules
 
-- :star: mark: the rule which is enabled by the `plugin:@intlify/svelte/recommended` or `*.configs.["flat/recommended"]` preset.
+- :star: mark: the rule which is enabled by the `*.configs.["flat/recommended"]` preset.
 - :black_nib: mark: the rule which is fixable by `eslint --fix` command.
 
 ## Recommended

lib/configs/flat/base.ts

@@ -12,7 +12,7 @@ export default [
   },
   {
     name: '@intlify/svelte:base:svelte',
-    files: ['*.svelte'],
+    files: ['**/*.svelte', '*.svelte'],
     languageOptions: {
       parser: parser
     }

playground/eslint.config.mjs

@@ -0,0 +1,12 @@
+import js from '@eslint/js'
+import intlifySvelte from '@intlify/eslint-plugin-svelte'
+export default [
+  js.configs.recommended,
+  ...intlifySvelte.configs.recommended,
+  {
+    files: ['**/*.svelte', '*.svelte'],
+    rules: {
+      '@intlify/svelte/no-raw-text': 'warn'
+    }
+  }
+]

playground/package.json

@@ -0,0 +1,9 @@
+{
+  "type": "module",
+  "devDependencies": {
+    "@eslint/js": "latest",
+    "eslint": "latest",
+    "@intlify/eslint-plugin-svelte": "latest",
+    "svelte-i18n": "^4.0.1"
+  }
+}

playground/src/MyComponent.svelte

@@ -0,0 +1,9 @@
+
+<script>
+  import { t } from 'svelte-i18n'
+</script>
+<!-- ✗ BAD -->
+<p>hello</p>
+
+<!-- ✓ GOOD -->
+<p>{ $t('hello') }</p>

scripts/update-docs-index.ts

@@ -37,7 +37,7 @@ writeFileSync(
   resolve(import.meta.dirname, '../docs/rules/README.md'),
   `# Available Rules
 
-- :star: mark: the rule which is enabled by the \`plugin:@intlify/svelte/recommended\` or \`*.configs.["flat/recommended"]\` preset.
+- :star: mark: the rule which is enabled by the \`*.configs.["flat/recommended"]\` preset.
 - :black_nib: mark: the rule which is fixable by \`eslint --fix\` command.
 
 ${withCategories

scripts/update-flat-base-config.ts

@@ -18,7 +18,7 @@ export default [
   },
   {
     name: '@intlify/svelte:base:svelte',
-    files: ['*.svelte'],
+    files: ['**/*.svelte', '*.svelte'],
     languageOptions: {
         parser: parser,
     }