Skip to content

Commit a6e867d

Browse files
elronelron
committed
iniital publish
1 parent 1b6c0f0 commit a6e867d

18 files changed

+348
-0
lines changed

‎.eslintignore

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎.eslintrc.cjs

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
module.exports = {
2+
root: true,
3+
extends: [
4+
'eslint:recommended',
5+
'plugin:@typescript-eslint/recommended',
6+
'plugin:svelte/recommended',
7+
'prettier'
8+
],
9+
parser: '@typescript-eslint/parser',
10+
plugins: ['@typescript-eslint'],
11+
parserOptions: {
12+
sourceType: 'module',
13+
ecmaVersion: 2020,
14+
extraFileExtensions: ['.svelte']
15+
},
16+
env: {
17+
browser: true,
18+
es2017: true,
19+
node: true
20+
},
21+
overrides: [
22+
{
23+
files: ['*.svelte'],
24+
parser: 'svelte-eslint-parser',
25+
parserOptions: {
26+
parser: '@typescript-eslint/parser'
27+
}
28+
}
29+
]
30+
};

‎.gitignore

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/dist
5+
/.svelte-kit
6+
/package
7+
.env
8+
.env.*
9+
!.env.example
10+
vite.config.js.timestamp-*
11+
vite.config.ts.timestamp-*

‎.npmrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
engine-strict=true
2+
resolution-mode=highest

‎.prettierignore

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎.prettierrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"useTabs": true,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"printWidth": 100,
6+
"plugins": ["prettier-plugin-svelte"],
7+
"pluginSearchDirs": ["."],
8+
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
9+
}

‎README.md

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Svelte WP Shortcodes
2+
3+
Elevate your Svelte apps with the power of WordPress-like shortcodes! This library allows you to dynamically embed Svelte components within static or dynamic content using the familiar shortcode syntax.
4+
5+
## 🚀 Features
6+
7+
📌 **Dynamic Embeds**: Seamlessly integrate Svelte components into static content.
8+
🔄 **Props Transfer**: Directly pass shortcode attributes as Svelte props.
9+
🌐 **SSR Compatibility**: Ready for SvelteKit's server-side rendering.
10+
👥 **Basic Nested Support**: The library offers initial support for nested shortcodes. It's optimized for simpler use cases, but deeper nesting or intricate scenarios might require special attention.
11+
12+
## 📦 Installation
13+
14+
```bash
15+
npm install svelte-wp-shortcodes
16+
```
17+
18+
## 🛠️ Quick Start
19+
20+
1. **Import the Shortcodes component**:
21+
```ts
22+
import WpShortcodes from '@elron/svelte-wp-shortcode';
23+
```
24+
25+
2. **Specify your Svelte components**:
26+
```ts
27+
import MyComponent from './MyComponent.svelte';
28+
```
29+
30+
3. **Use the shortcodes in your content**:
31+
```svelte
32+
<WpShortcodes markup="Here's a special feature: [my-component prop='value']" components={{'my-component': MyComponent}} />
33+
```
34+
35+
... and voilà! Your Svelte component MyComponent gets rendered wherever the shortcode is placed.
36+
37+
## 💡 Notes
38+
- Supports both self-closing ([component]) and pair tags ([component]...[/component]).
39+
- Developed with love and tested for compatibility with SvelteKit's server-side rendering.
40+
41+
42+
## ❤️ Contributing
43+
Your input is valued! Share your feedback, report bugs, or make pull requests on our GitHub repository.
44+
45+
46+

‎package.json

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
{
2+
"name": "@elron/svelte-wp-shortcode",
3+
"version": "0.0.1",
4+
"author": "Elron Bucai",
5+
"license": "MIT",
6+
"keywords": [
7+
"svelte",
8+
"shortcode",
9+
"wordpress",
10+
"dynamic content",
11+
"svelte component",
12+
"markup",
13+
"embedded components",
14+
"props",
15+
"SSR",
16+
"sveltekit"
17+
],
18+
"repository": {
19+
"type": "git",
20+
"url": "https://github.com/elron/svelte-wp-shortcodes.git"
21+
},
22+
"homepage": "https://svelte-wp-shortcodes.netlify.app/",
23+
"bugs": {
24+
"url": "https://github.com/elron/svelte-wp-shortcodes/issues"
25+
},
26+
"scripts": {
27+
"dev": "vite dev",
28+
"build": "vite build && npm run package",
29+
"preview": "vite preview",
30+
"package": "svelte-kit sync && svelte-package && publint",
31+
"prepublishOnly": "npm run package",
32+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
33+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
34+
"test": "vitest",
35+
"lint": "prettier --plugin-search-dir . --check . && eslint .",
36+
"format": "prettier --plugin-search-dir . --write ."
37+
},
38+
"exports": {
39+
".": {
40+
"types": "./dist/index.d.ts",
41+
"svelte": "./dist/index.js"
42+
}
43+
},
44+
"files": [
45+
"dist",
46+
"!dist/**/*.test.*",
47+
"!dist/**/*.spec.*"
48+
],
49+
"peerDependencies": {
50+
"svelte": "^4.0.0"
51+
},
52+
"devDependencies": {
53+
"@sveltejs/adapter-auto": "^2.0.0",
54+
"@sveltejs/kit": "^1.20.4",
55+
"@sveltejs/package": "^2.0.0",
56+
"@typescript-eslint/eslint-plugin": "^5.45.0",
57+
"@typescript-eslint/parser": "^5.45.0",
58+
"eslint": "^8.28.0",
59+
"eslint-config-prettier": "^8.5.0",
60+
"eslint-plugin-svelte": "^2.30.0",
61+
"prettier": "^2.8.0",
62+
"prettier-plugin-svelte": "^2.10.1",
63+
"publint": "^0.1.9",
64+
"svelte": "^4.0.5",
65+
"svelte-check": "^3.4.3",
66+
"tslib": "^2.4.1",
67+
"typescript": "^5.0.0",
68+
"vite": "^4.4.2",
69+
"vitest": "^0.33.0"
70+
},
71+
"svelte": "./dist/index.js",
72+
"types": "./dist/index.d.ts",
73+
"type": "module"
74+
}

‎src/app.d.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// See https://kit.svelte.dev/docs/types#app
2+
// for information about these interfaces
3+
declare global {
4+
namespace App {
5+
// interface Error {}
6+
// interface Locals {}
7+
// interface PageData {}
8+
// interface Platform {}
9+
}
10+
}
11+
12+
export {};

‎src/app.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
%sveltekit.head%
8+
</head>
9+
<body data-sveltekit-preload-data="hover">
10+
<div>%sveltekit.body%</div>
11+
</body>
12+
</html>

‎src/index.test.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { describe, it, expect } from 'vitest';
2+
3+
describe('sum test', () => {
4+
it('adds 1 + 2 to equal 3', () => {
5+
expect(1 + 2).toBe(3);
6+
});
7+
});

‎src/lib/WpShortcodes.svelte

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script lang="ts">
2+
export let markup: string;
3+
export let components: { [key: string]: any } = {};
4+
5+
let componentInstances: any[] = [];
6+
let parsedMarkup: any[] = [];
7+
8+
$: {
9+
let shortcodePatterns: { [pattern: string]: any } = {};
10+
11+
// Generate regex patterns based on provided components
12+
for (let componentName in components) {
13+
shortcodePatterns[`\\[${componentName}(.*?)(?:\\](.*?)\\[/${componentName}\\]|\\])`] =
14+
components[componentName];
15+
}
16+
17+
function extractAttributes(attrString: string): { [key: string]: string } {
18+
let attrs = attrString
19+
.trim()
20+
.split(' ')
21+
.reduce((acc: { [key: string]: string }, curr) => {
22+
let [key, value] = curr.split('=');
23+
acc[key] = value?.replace(/"/g, ''); // remove quotes if present
24+
return acc;
25+
}, {});
26+
return attrs;
27+
}
28+
29+
componentInstances = [];
30+
31+
// Parse the markup for any shortcode and replace with the corresponding component
32+
for (let pattern in shortcodePatterns) {
33+
let regex = new RegExp(pattern, 'g');
34+
let match;
35+
36+
while ((match = regex.exec(markup)) !== null) {
37+
let attributesString = match[1];
38+
let content = match[2] || '';
39+
let props = extractAttributes(attributesString);
40+
41+
componentInstances.push({
42+
start: match.index,
43+
end: match.index + match[0].length,
44+
component: shortcodePatterns[pattern],
45+
props: props,
46+
content: content
47+
});
48+
}
49+
}
50+
51+
// Construct the parsedMarkup array for rendering
52+
parsedMarkup = [];
53+
let lastIndex = 0;
54+
componentInstances
55+
.sort((a, b) => a.start - b.start)
56+
.forEach((item) => {
57+
parsedMarkup.push(markup.slice(lastIndex, item.start));
58+
parsedMarkup.push(item);
59+
lastIndex = item.end;
60+
});
61+
parsedMarkup.push(markup.slice(lastIndex));
62+
}
63+
</script>
64+
65+
{#each parsedMarkup as item}
66+
{#if typeof item === 'string'}
67+
{@html item}
68+
{:else}
69+
<svelte:component this={item.component} {...item.props}>
70+
{item.content}
71+
</svelte:component>
72+
{/if}
73+
{/each}

‎src/lib/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// Reexport your entry components here
2+
export { default as WpShortcodes } from "./WpShortcodes.svelte";

‎src/routes/+page.svelte

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<h1>Welcome to your library project</h1>
2+
<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
3+
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

‎static/favicon.png

1.53 KB
Loading

‎svelte.config.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import adapter from '@sveltejs/adapter-auto';
2+
import { vitePreprocess } from '@sveltejs/kit/vite';
3+
4+
/** @type {import('@sveltejs/kit').Config} */
5+
const config = {
6+
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
7+
// for more information about preprocessors
8+
preprocess: vitePreprocess(),
9+
10+
kit: {
11+
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12+
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
13+
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
14+
adapter: adapter()
15+
}
16+
};
17+
18+
export default config;

‎tsconfig.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"extends": "./.svelte-kit/tsconfig.json",
3+
"compilerOptions": {
4+
"allowJs": true,
5+
"checkJs": true,
6+
"esModuleInterop": true,
7+
"forceConsistentCasingInFileNames": true,
8+
"resolveJsonModule": true,
9+
"skipLibCheck": true,
10+
"sourceMap": true,
11+
"strict": true,
12+
"moduleResolution": "NodeNext"
13+
}
14+
}

‎vite.config.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { sveltekit } from '@sveltejs/kit/vite';
2+
import { defineConfig } from 'vitest/config';
3+
4+
export default defineConfig({
5+
plugins: [sveltekit()],
6+
test: {
7+
include: ['src/**/*.{test,spec}.{js,ts}']
8+
}
9+
});

0 commit comments

Comments
 (0)