├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── web-component.code-workspace ├── web-component ├── .eslintignore ├── .eslintrc.cjs ├── .gitignore ├── .prettierignore ├── .prettierrc ├── index.html ├── package.json ├── postcss.config.js ├── src │ ├── bundle │ │ ├── component.svelte │ │ ├── dev.svelte │ │ ├── index.ts │ │ └── tailwind.css │ ├── demo │ │ ├── demo.svelte │ │ ├── hello-world.svelte │ │ └── index.ts │ ├── main.ts │ └── vite-env.d.ts ├── svelte.config.js ├── tailwind.config.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts └── wp-plugin ├── .gitignore ├── bundle.cmd ├── bundle.sh ├── composer.json ├── composer.lock ├── lib ├── core.php ├── demo │ ├── enqueue.php │ ├── js │ │ └── web-component-demo.js │ ├── shortcode.php │ └── start.php └── start.php ├── package.json ├── phpcs.xml.dist └── web-component.php /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | node_modules/ 4 | *.sql 5 | *.tar.gz 6 | *.zip 7 | vendor/ 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WordPress Plugin with Web Component 2 | 3 | A quick boilerplate/demo of a svelte + vite web component integrated into a WordPress plugin. The web component is rendered from the shortcode `[web-component-demo]`. 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web-component-monorepo", 3 | "version": "0.0.0", 4 | "description": "", 5 | "private": true, 6 | "workspaces": [ 7 | "web-component", 8 | "wp-plugin" 9 | ], 10 | "scripts": { 11 | "dev": "npm run dev -w=web-component", 12 | "build": "npm -ws run build", 13 | "bundle:win": "npm run bundle:win -w=wp-plugin", 14 | "bundle:nix": "npm run bundle:nix -w=wp-plugin" 15 | }, 16 | "keywords": [], 17 | "author": "", 18 | "license": "ISC", 19 | "type": "module" 20 | } 21 | -------------------------------------------------------------------------------- /web-component.code-workspace: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [{ "path": "web-component" }, { "path": "wp-plugin" }, { "path": "." }], 3 | "settings": { 4 | "files.exclude": { 5 | "web-component": true, 6 | "wp-plugin": true 7 | }, 8 | "[php]": { 9 | "editor.defaultFormatter": "wongjn.php-sniffer" 10 | }, 11 | "prettier.configPath": "./.prettierrc" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /web-component/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /package 5 | .env 6 | .env.* 7 | !.env.example 8 | 9 | # Ignore files for PNPM, NPM and YARN 10 | pnpm-lock.yaml 11 | package-lock.json 12 | yarn.lock 13 | -------------------------------------------------------------------------------- /web-component/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /** @type { import("eslint").Linter.Config } */ 2 | module.exports = { 3 | root: true, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:svelte/recommended', 8 | 'prettier' 9 | ], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['@typescript-eslint'], 12 | parserOptions: { 13 | sourceType: 'module', 14 | ecmaVersion: 2020, 15 | extraFileExtensions: ['.svelte'] 16 | }, 17 | env: { 18 | browser: true, 19 | es2017: true, 20 | node: true 21 | }, 22 | overrides: [ 23 | { 24 | files: ['*.svelte'], 25 | parser: 'svelte-eslint-parser', 26 | parserOptions: { 27 | parser: '@typescript-eslint/parser' 28 | } 29 | } 30 | ] 31 | }; 32 | -------------------------------------------------------------------------------- /web-component/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /web-component/.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore files for PNPM, NPM and YARN 2 | pnpm-lock.yaml 3 | package-lock.json 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /web-component/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100, 6 | "plugins": ["prettier-plugin-svelte"], 7 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }], 8 | "htmlWhitespaceSensitivity": "ignore" 9 | } 10 | -------------------------------------------------------------------------------- /web-component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Development: Web Component Demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /web-component/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@you/web-component-demo", 3 | "private": true, 4 | "version": "0.0.0", 5 | "license": "ISC", 6 | "type": "module", 7 | "scripts": { 8 | "dev": "vite", 9 | "build": "vite build", 10 | "preview": "vite preview", 11 | "check": "svelte-check --tsconfig ./tsconfig.json" 12 | }, 13 | "exports": { 14 | ".": "./dist/web-component-demo.iife.js", 15 | "./dist/": "./dist/" 16 | }, 17 | "files": [ 18 | "dist" 19 | ], 20 | "devDependencies": { 21 | "@types/eslint": "8.56.0", 22 | "@typescript-eslint/eslint-plugin": "^6.0.0", 23 | "@typescript-eslint/parser": "^6.0.0", 24 | "eslint": "^8.56.0", 25 | "eslint-config-prettier": "^9.1.0", 26 | "eslint-plugin-svelte": "^2.35.1", 27 | "prettier": "^3.1.1", 28 | "prettier-plugin-svelte": "^3.1.2", 29 | "@sveltejs/vite-plugin-svelte": "^3.0.2", 30 | "@tsconfig/svelte": "^5.0.2", 31 | "autoprefixer": "^10.4.17", 32 | "postcss": "^8.4.35", 33 | "svelte": "^4.2.10", 34 | "svelte-check": "^3.6.3", 35 | "tailwindcss": "^3.4.1", 36 | "tslib": "^2.6.2", 37 | "typescript": "^5.2.2", 38 | "vite": "^5.1.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /web-component/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {} 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /web-component/src/bundle/component.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | {#if import.meta.env.MODE === 'development'} 14 | 15 | 16 | 17 | {:else} 18 | 19 | {/if} 20 |
21 | -------------------------------------------------------------------------------- /web-component/src/bundle/dev.svelte: -------------------------------------------------------------------------------- 1 |
2 |

Development

3 | 4 |
5 | 6 |
7 |
8 | -------------------------------------------------------------------------------- /web-component/src/bundle/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Component } from './component.svelte'; 2 | -------------------------------------------------------------------------------- /web-component/src/bundle/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /web-component/src/demo/demo.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /web-component/src/demo/hello-world.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 |
5 |
6 |
Hello World!
7 |

8 | This project offers a template for building web components within WordPress. Suitable for 9 | developers looking to experiment with this technology and its integration with a popular CMS. 10 |

11 |

12 | Prefer the speed and flexibility of Tailwind CSS? This project seamlessly integrates the 13 | popular styling framework, allowing you to quickly design beautiful and responsive web 14 | components with ease. 15 |

16 |
17 |
18 | -------------------------------------------------------------------------------- /web-component/src/demo/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Demo } from './demo.svelte'; 2 | -------------------------------------------------------------------------------- /web-component/src/main.ts: -------------------------------------------------------------------------------- 1 | export { Demo as WebComponentDemo } from './demo'; 2 | -------------------------------------------------------------------------------- /web-component/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | declare global { 5 | interface Window { 6 | // Window Types Go Here. 7 | } 8 | } 9 | 10 | export {}; 11 | -------------------------------------------------------------------------------- /web-component/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 2 | 3 | export default { 4 | preprocess: vitePreprocess(), 5 | compilerOptions: { 6 | customElement: true 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /web-component/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ['./index.html', './src/**/*.{js,svelte,ts,jsx,tsx}'], 4 | theme: { 5 | extend: {} 6 | }, 7 | plugins: [] 8 | }; 9 | -------------------------------------------------------------------------------- /web-component/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | "allowJs": true, 9 | "checkJs": true, 10 | "isolatedModules": true, 11 | "paths": { 12 | "$lib/*": ["./src/*"] 13 | } 14 | }, 15 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 16 | "references": [{ "path": "./tsconfig.node.json" }] 17 | } 18 | -------------------------------------------------------------------------------- /web-component/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "strict": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /web-component/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { svelte } from '@sveltejs/vite-plugin-svelte'; 2 | import { defineConfig } from 'vite'; 3 | 4 | export default defineConfig({ 5 | resolve: { alias: { $lib: '/src' } }, 6 | build: { 7 | lib: { 8 | entry: 'src/main.ts', 9 | name: 'WebComponentDemo', 10 | fileName: 'web-component-demo', 11 | formats: ['iife'] 12 | } 13 | }, 14 | plugins: [svelte()] 15 | }); 16 | -------------------------------------------------------------------------------- /wp-plugin/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | phpcs.xml 3 | phpunit.xml 4 | Thumbs.db 5 | wp-cli.local.yml 6 | node_modules/ 7 | *.sql 8 | *.tar.gz 9 | *.zip 10 | vendor/ 11 | assets/js/ 12 | -------------------------------------------------------------------------------- /wp-plugin/bundle.cmd: -------------------------------------------------------------------------------- 1 | @ECHO OFF 2 | SETLOCAL EnableDelayedExpansion 3 | 4 | SET ThisScriptsDirectory=%~dp0 5 | 6 | CD %ThisScriptsDirectory% 7 | SET "NODE_ENV=production" 8 | CALL composer install --no-dev 9 | CALL npm run build 10 | 11 | CALL MKDIR "%TEMP%\web-component" 12 | CALL ROBOCOPY.EXE .\ %TEMP%\web-component\ /E /XD node_modules src /XF *.config.js package.json package-lock.json phpcs.xml.dist composer.lock composer.json .gitignore *.cmd *.sh .Thumbs.db 13 | CALL ROBOCOPY.EXE .\vendor\ %TEMP%\web-component\vendor\ /E 14 | 15 | CD %TEMP% 16 | 17 | CALL TAR.EXE -ac -f %ThisScriptsDirectory%\..\web-component.zip web-component 18 | 19 | CD %ThisScriptsDirectory% 20 | 21 | CALL RMDIR /S /Q "%TEMP%\web-component" 22 | -------------------------------------------------------------------------------- /wp-plugin/bundle.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ThisScriptsDirectory=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd ) 4 | tmp=${TMPDIR:-/tmp} 5 | 6 | cd "$ThisScriptsDirectory" 7 | export NODE_ENV="production" 8 | composer install --no-dev 9 | npm run build 10 | 11 | mkdir "$tmp/web-component" 12 | rsync -av --delete \ 13 | --exclude=node_modules/ \ 14 | --exclude=src/ \ 15 | --exclude=*.config.js \ 16 | --exclude=package.json \ 17 | --exclude=package-lock.json \ 18 | --exclude=phpcs.xml.dist \ 19 | --exclude=composer.lock \ 20 | --exclude=composer.json \ 21 | --exclude=.gitignore \ 22 | --exclude=.DS_STORE \ 23 | --exclude=*.cmd \ 24 | --exclude=*.sh \ 25 | ./ "$tmp/web-component/" 26 | 27 | rsync -av --delete ./vendor/ "$tmp/web-component/vendor/" 28 | 29 | cd "$tmp" 30 | 31 | zip -r "$ThisScriptsDirectory/../web-component.zip" web-component 32 | 33 | cd "$ThisScriptsDirectory" 34 | 35 | rm -fr "$tmp/web-component" 36 | -------------------------------------------------------------------------------- /wp-plugin/composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "you/web-component", 3 | "type": "wordpress-plugin", 4 | "license": "GPL-3.0-or-later", 5 | "description": "A Demo/Boilerplate for building web-components using Svelte for WordPress.", 6 | "homepage": "https://github.com/jonshipman/web-component", 7 | "config": { 8 | "platform": { 9 | "php": "8.1" 10 | }, 11 | "allow-plugins": { 12 | "dealerdirect/phpcodesniffer-composer-installer": true 13 | } 14 | }, 15 | "authors": [ 16 | { 17 | "name": "Jon Shipman", 18 | "email": "jon@shaemarcus.com", 19 | "homepage": "https://www.shaemarcus.com" 20 | } 21 | ], 22 | "support": { 23 | "issues": "https://github.com/jonshipman/web-component/issues" 24 | }, 25 | "require-dev": { 26 | "php": "^8.1", 27 | "squizlabs/php_codesniffer": "^3.8", 28 | "phpcompatibility/php-compatibility": "^9.3.0", 29 | "phpcompatibility/phpcompatibility-wp": "^2.1.0", 30 | "wp-coding-standards/wpcs": "^3.0", 31 | "dealerdirect/phpcodesniffer-composer-installer": "^1.0.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /wp-plugin/composer.lock: -------------------------------------------------------------------------------- 1 | { 2 | "_readme": [ 3 | "This file locks the dependencies of your project to a known state", 4 | "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", 5 | "This file is @generated automatically" 6 | ], 7 | "content-hash": "dcca10a30190779c06f5d98d26ab3dc3", 8 | "packages": [], 9 | "packages-dev": [ 10 | { 11 | "name": "dealerdirect/phpcodesniffer-composer-installer", 12 | "version": "v1.0.0", 13 | "source": { 14 | "type": "git", 15 | "url": "https://github.com/PHPCSStandards/composer-installer.git", 16 | "reference": "4be43904336affa5c2f70744a348312336afd0da" 17 | }, 18 | "dist": { 19 | "type": "zip", 20 | "url": "https://api.github.com/repos/PHPCSStandards/composer-installer/zipball/4be43904336affa5c2f70744a348312336afd0da", 21 | "reference": "4be43904336affa5c2f70744a348312336afd0da", 22 | "shasum": "" 23 | }, 24 | "require": { 25 | "composer-plugin-api": "^1.0 || ^2.0", 26 | "php": ">=5.4", 27 | "squizlabs/php_codesniffer": "^2.0 || ^3.1.0 || ^4.0" 28 | }, 29 | "require-dev": { 30 | "composer/composer": "*", 31 | "ext-json": "*", 32 | "ext-zip": "*", 33 | "php-parallel-lint/php-parallel-lint": "^1.3.1", 34 | "phpcompatibility/php-compatibility": "^9.0", 35 | "yoast/phpunit-polyfills": "^1.0" 36 | }, 37 | "type": "composer-plugin", 38 | "extra": { 39 | "class": "PHPCSStandards\\Composer\\Plugin\\Installers\\PHPCodeSniffer\\Plugin" 40 | }, 41 | "autoload": { 42 | "psr-4": { 43 | "PHPCSStandards\\Composer\\Plugin\\Installers\\PHPCodeSniffer\\": "src/" 44 | } 45 | }, 46 | "notification-url": "https://packagist.org/downloads/", 47 | "license": [ 48 | "MIT" 49 | ], 50 | "authors": [ 51 | { 52 | "name": "Franck Nijhof", 53 | "email": "franck.nijhof@dealerdirect.com", 54 | "homepage": "http://www.frenck.nl", 55 | "role": "Developer / IT Manager" 56 | }, 57 | { 58 | "name": "Contributors", 59 | "homepage": "https://github.com/PHPCSStandards/composer-installer/graphs/contributors" 60 | } 61 | ], 62 | "description": "PHP_CodeSniffer Standards Composer Installer Plugin", 63 | "homepage": "http://www.dealerdirect.com", 64 | "keywords": [ 65 | "PHPCodeSniffer", 66 | "PHP_CodeSniffer", 67 | "code quality", 68 | "codesniffer", 69 | "composer", 70 | "installer", 71 | "phpcbf", 72 | "phpcs", 73 | "plugin", 74 | "qa", 75 | "quality", 76 | "standard", 77 | "standards", 78 | "style guide", 79 | "stylecheck", 80 | "tests" 81 | ], 82 | "support": { 83 | "issues": "https://github.com/PHPCSStandards/composer-installer/issues", 84 | "source": "https://github.com/PHPCSStandards/composer-installer" 85 | }, 86 | "time": "2023-01-05T11:28:13+00:00" 87 | }, 88 | { 89 | "name": "phpcompatibility/php-compatibility", 90 | "version": "9.3.5", 91 | "source": { 92 | "type": "git", 93 | "url": "https://github.com/PHPCompatibility/PHPCompatibility.git", 94 | "reference": "9fb324479acf6f39452e0655d2429cc0d3914243" 95 | }, 96 | "dist": { 97 | "type": "zip", 98 | "url": "https://api.github.com/repos/PHPCompatibility/PHPCompatibility/zipball/9fb324479acf6f39452e0655d2429cc0d3914243", 99 | "reference": "9fb324479acf6f39452e0655d2429cc0d3914243", 100 | "shasum": "" 101 | }, 102 | "require": { 103 | "php": ">=5.3", 104 | "squizlabs/php_codesniffer": "^2.3 || ^3.0.2" 105 | }, 106 | "conflict": { 107 | "squizlabs/php_codesniffer": "2.6.2" 108 | }, 109 | "require-dev": { 110 | "phpunit/phpunit": "~4.5 || ^5.0 || ^6.0 || ^7.0" 111 | }, 112 | "suggest": { 113 | "dealerdirect/phpcodesniffer-composer-installer": "^0.5 || This Composer plugin will sort out the PHPCS 'installed_paths' automatically.", 114 | "roave/security-advisories": "dev-master || Helps prevent installing dependencies with known security issues." 115 | }, 116 | "type": "phpcodesniffer-standard", 117 | "notification-url": "https://packagist.org/downloads/", 118 | "license": [ 119 | "LGPL-3.0-or-later" 120 | ], 121 | "authors": [ 122 | { 123 | "name": "Wim Godden", 124 | "homepage": "https://github.com/wimg", 125 | "role": "lead" 126 | }, 127 | { 128 | "name": "Juliette Reinders Folmer", 129 | "homepage": "https://github.com/jrfnl", 130 | "role": "lead" 131 | }, 132 | { 133 | "name": "Contributors", 134 | "homepage": "https://github.com/PHPCompatibility/PHPCompatibility/graphs/contributors" 135 | } 136 | ], 137 | "description": "A set of sniffs for PHP_CodeSniffer that checks for PHP cross-version compatibility.", 138 | "homepage": "http://techblog.wimgodden.be/tag/codesniffer/", 139 | "keywords": [ 140 | "compatibility", 141 | "phpcs", 142 | "standards" 143 | ], 144 | "support": { 145 | "issues": "https://github.com/PHPCompatibility/PHPCompatibility/issues", 146 | "source": "https://github.com/PHPCompatibility/PHPCompatibility" 147 | }, 148 | "time": "2019-12-27T09:44:58+00:00" 149 | }, 150 | { 151 | "name": "phpcompatibility/phpcompatibility-paragonie", 152 | "version": "1.3.2", 153 | "source": { 154 | "type": "git", 155 | "url": "https://github.com/PHPCompatibility/PHPCompatibilityParagonie.git", 156 | "reference": "bba5a9dfec7fcfbd679cfaf611d86b4d3759da26" 157 | }, 158 | "dist": { 159 | "type": "zip", 160 | "url": "https://api.github.com/repos/PHPCompatibility/PHPCompatibilityParagonie/zipball/bba5a9dfec7fcfbd679cfaf611d86b4d3759da26", 161 | "reference": "bba5a9dfec7fcfbd679cfaf611d86b4d3759da26", 162 | "shasum": "" 163 | }, 164 | "require": { 165 | "phpcompatibility/php-compatibility": "^9.0" 166 | }, 167 | "require-dev": { 168 | "dealerdirect/phpcodesniffer-composer-installer": "^0.7", 169 | "paragonie/random_compat": "dev-master", 170 | "paragonie/sodium_compat": "dev-master" 171 | }, 172 | "suggest": { 173 | "dealerdirect/phpcodesniffer-composer-installer": "^0.7 || This Composer plugin will sort out the PHP_CodeSniffer 'installed_paths' automatically.", 174 | "roave/security-advisories": "dev-master || Helps prevent installing dependencies with known security issues." 175 | }, 176 | "type": "phpcodesniffer-standard", 177 | "notification-url": "https://packagist.org/downloads/", 178 | "license": [ 179 | "LGPL-3.0-or-later" 180 | ], 181 | "authors": [ 182 | { 183 | "name": "Wim Godden", 184 | "role": "lead" 185 | }, 186 | { 187 | "name": "Juliette Reinders Folmer", 188 | "role": "lead" 189 | } 190 | ], 191 | "description": "A set of rulesets for PHP_CodeSniffer to check for PHP cross-version compatibility issues in projects, while accounting for polyfills provided by the Paragonie polyfill libraries.", 192 | "homepage": "http://phpcompatibility.com/", 193 | "keywords": [ 194 | "compatibility", 195 | "paragonie", 196 | "phpcs", 197 | "polyfill", 198 | "standards", 199 | "static analysis" 200 | ], 201 | "support": { 202 | "issues": "https://github.com/PHPCompatibility/PHPCompatibilityParagonie/issues", 203 | "source": "https://github.com/PHPCompatibility/PHPCompatibilityParagonie" 204 | }, 205 | "time": "2022-10-25T01:46:02+00:00" 206 | }, 207 | { 208 | "name": "phpcompatibility/phpcompatibility-wp", 209 | "version": "2.1.4", 210 | "source": { 211 | "type": "git", 212 | "url": "https://github.com/PHPCompatibility/PHPCompatibilityWP.git", 213 | "reference": "b6c1e3ee1c35de6c41a511d5eb9bd03e447480a5" 214 | }, 215 | "dist": { 216 | "type": "zip", 217 | "url": "https://api.github.com/repos/PHPCompatibility/PHPCompatibilityWP/zipball/b6c1e3ee1c35de6c41a511d5eb9bd03e447480a5", 218 | "reference": "b6c1e3ee1c35de6c41a511d5eb9bd03e447480a5", 219 | "shasum": "" 220 | }, 221 | "require": { 222 | "phpcompatibility/php-compatibility": "^9.0", 223 | "phpcompatibility/phpcompatibility-paragonie": "^1.0" 224 | }, 225 | "require-dev": { 226 | "dealerdirect/phpcodesniffer-composer-installer": "^0.7" 227 | }, 228 | "suggest": { 229 | "dealerdirect/phpcodesniffer-composer-installer": "^0.7 || This Composer plugin will sort out the PHP_CodeSniffer 'installed_paths' automatically.", 230 | "roave/security-advisories": "dev-master || Helps prevent installing dependencies with known security issues." 231 | }, 232 | "type": "phpcodesniffer-standard", 233 | "notification-url": "https://packagist.org/downloads/", 234 | "license": [ 235 | "LGPL-3.0-or-later" 236 | ], 237 | "authors": [ 238 | { 239 | "name": "Wim Godden", 240 | "role": "lead" 241 | }, 242 | { 243 | "name": "Juliette Reinders Folmer", 244 | "role": "lead" 245 | } 246 | ], 247 | "description": "A ruleset for PHP_CodeSniffer to check for PHP cross-version compatibility issues in projects, while accounting for polyfills provided by WordPress.", 248 | "homepage": "http://phpcompatibility.com/", 249 | "keywords": [ 250 | "compatibility", 251 | "phpcs", 252 | "standards", 253 | "static analysis", 254 | "wordpress" 255 | ], 256 | "support": { 257 | "issues": "https://github.com/PHPCompatibility/PHPCompatibilityWP/issues", 258 | "source": "https://github.com/PHPCompatibility/PHPCompatibilityWP" 259 | }, 260 | "time": "2022-10-24T09:00:36+00:00" 261 | }, 262 | { 263 | "name": "phpcsstandards/phpcsextra", 264 | "version": "1.2.1", 265 | "source": { 266 | "type": "git", 267 | "url": "https://github.com/PHPCSStandards/PHPCSExtra.git", 268 | "reference": "11d387c6642b6e4acaf0bd9bf5203b8cca1ec489" 269 | }, 270 | "dist": { 271 | "type": "zip", 272 | "url": "https://api.github.com/repos/PHPCSStandards/PHPCSExtra/zipball/11d387c6642b6e4acaf0bd9bf5203b8cca1ec489", 273 | "reference": "11d387c6642b6e4acaf0bd9bf5203b8cca1ec489", 274 | "shasum": "" 275 | }, 276 | "require": { 277 | "php": ">=5.4", 278 | "phpcsstandards/phpcsutils": "^1.0.9", 279 | "squizlabs/php_codesniffer": "^3.8.0" 280 | }, 281 | "require-dev": { 282 | "php-parallel-lint/php-console-highlighter": "^1.0", 283 | "php-parallel-lint/php-parallel-lint": "^1.3.2", 284 | "phpcsstandards/phpcsdevcs": "^1.1.6", 285 | "phpcsstandards/phpcsdevtools": "^1.2.1", 286 | "phpunit/phpunit": "^4.5 || ^5.0 || ^6.0 || ^7.0 || ^8.0 || ^9.0" 287 | }, 288 | "type": "phpcodesniffer-standard", 289 | "extra": { 290 | "branch-alias": { 291 | "dev-stable": "1.x-dev", 292 | "dev-develop": "1.x-dev" 293 | } 294 | }, 295 | "notification-url": "https://packagist.org/downloads/", 296 | "license": [ 297 | "LGPL-3.0-or-later" 298 | ], 299 | "authors": [ 300 | { 301 | "name": "Juliette Reinders Folmer", 302 | "homepage": "https://github.com/jrfnl", 303 | "role": "lead" 304 | }, 305 | { 306 | "name": "Contributors", 307 | "homepage": "https://github.com/PHPCSStandards/PHPCSExtra/graphs/contributors" 308 | } 309 | ], 310 | "description": "A collection of sniffs and standards for use with PHP_CodeSniffer.", 311 | "keywords": [ 312 | "PHP_CodeSniffer", 313 | "phpcbf", 314 | "phpcodesniffer-standard", 315 | "phpcs", 316 | "standards", 317 | "static analysis" 318 | ], 319 | "support": { 320 | "issues": "https://github.com/PHPCSStandards/PHPCSExtra/issues", 321 | "security": "https://github.com/PHPCSStandards/PHPCSExtra/security/policy", 322 | "source": "https://github.com/PHPCSStandards/PHPCSExtra" 323 | }, 324 | "funding": [ 325 | { 326 | "url": "https://github.com/PHPCSStandards", 327 | "type": "github" 328 | }, 329 | { 330 | "url": "https://github.com/jrfnl", 331 | "type": "github" 332 | }, 333 | { 334 | "url": "https://opencollective.com/php_codesniffer", 335 | "type": "open_collective" 336 | } 337 | ], 338 | "time": "2023-12-08T16:49:07+00:00" 339 | }, 340 | { 341 | "name": "phpcsstandards/phpcsutils", 342 | "version": "1.0.9", 343 | "source": { 344 | "type": "git", 345 | "url": "https://github.com/PHPCSStandards/PHPCSUtils.git", 346 | "reference": "908247bc65010c7b7541a9551e002db12e9dae70" 347 | }, 348 | "dist": { 349 | "type": "zip", 350 | "url": "https://api.github.com/repos/PHPCSStandards/PHPCSUtils/zipball/908247bc65010c7b7541a9551e002db12e9dae70", 351 | "reference": "908247bc65010c7b7541a9551e002db12e9dae70", 352 | "shasum": "" 353 | }, 354 | "require": { 355 | "dealerdirect/phpcodesniffer-composer-installer": "^0.4.1 || ^0.5 || ^0.6.2 || ^0.7 || ^1.0", 356 | "php": ">=5.4", 357 | "squizlabs/php_codesniffer": "^3.8.0 || 4.0.x-dev@dev" 358 | }, 359 | "require-dev": { 360 | "ext-filter": "*", 361 | "php-parallel-lint/php-console-highlighter": "^1.0", 362 | "php-parallel-lint/php-parallel-lint": "^1.3.2", 363 | "phpcsstandards/phpcsdevcs": "^1.1.6", 364 | "yoast/phpunit-polyfills": "^1.1.0 || ^2.0.0" 365 | }, 366 | "type": "phpcodesniffer-standard", 367 | "extra": { 368 | "branch-alias": { 369 | "dev-stable": "1.x-dev", 370 | "dev-develop": "1.x-dev" 371 | } 372 | }, 373 | "autoload": { 374 | "classmap": [ 375 | "PHPCSUtils/" 376 | ] 377 | }, 378 | "notification-url": "https://packagist.org/downloads/", 379 | "license": [ 380 | "LGPL-3.0-or-later" 381 | ], 382 | "authors": [ 383 | { 384 | "name": "Juliette Reinders Folmer", 385 | "homepage": "https://github.com/jrfnl", 386 | "role": "lead" 387 | }, 388 | { 389 | "name": "Contributors", 390 | "homepage": "https://github.com/PHPCSStandards/PHPCSUtils/graphs/contributors" 391 | } 392 | ], 393 | "description": "A suite of utility functions for use with PHP_CodeSniffer", 394 | "homepage": "https://phpcsutils.com/", 395 | "keywords": [ 396 | "PHP_CodeSniffer", 397 | "phpcbf", 398 | "phpcodesniffer-standard", 399 | "phpcs", 400 | "phpcs3", 401 | "standards", 402 | "static analysis", 403 | "tokens", 404 | "utility" 405 | ], 406 | "support": { 407 | "docs": "https://phpcsutils.com/", 408 | "issues": "https://github.com/PHPCSStandards/PHPCSUtils/issues", 409 | "security": "https://github.com/PHPCSStandards/PHPCSUtils/security/policy", 410 | "source": "https://github.com/PHPCSStandards/PHPCSUtils" 411 | }, 412 | "funding": [ 413 | { 414 | "url": "https://github.com/PHPCSStandards", 415 | "type": "github" 416 | }, 417 | { 418 | "url": "https://github.com/jrfnl", 419 | "type": "github" 420 | }, 421 | { 422 | "url": "https://opencollective.com/php_codesniffer", 423 | "type": "open_collective" 424 | } 425 | ], 426 | "time": "2023-12-08T14:50:00+00:00" 427 | }, 428 | { 429 | "name": "squizlabs/php_codesniffer", 430 | "version": "3.9.0", 431 | "source": { 432 | "type": "git", 433 | "url": "https://github.com/PHPCSStandards/PHP_CodeSniffer.git", 434 | "reference": "d63cee4890a8afaf86a22e51ad4d97c91dd4579b" 435 | }, 436 | "dist": { 437 | "type": "zip", 438 | "url": "https://api.github.com/repos/PHPCSStandards/PHP_CodeSniffer/zipball/d63cee4890a8afaf86a22e51ad4d97c91dd4579b", 439 | "reference": "d63cee4890a8afaf86a22e51ad4d97c91dd4579b", 440 | "shasum": "" 441 | }, 442 | "require": { 443 | "ext-simplexml": "*", 444 | "ext-tokenizer": "*", 445 | "ext-xmlwriter": "*", 446 | "php": ">=5.4.0" 447 | }, 448 | "require-dev": { 449 | "phpunit/phpunit": "^4.0 || ^5.0 || ^6.0 || ^7.0 || ^8.0 || ^9.3.4" 450 | }, 451 | "bin": [ 452 | "bin/phpcbf", 453 | "bin/phpcs" 454 | ], 455 | "type": "library", 456 | "extra": { 457 | "branch-alias": { 458 | "dev-master": "3.x-dev" 459 | } 460 | }, 461 | "notification-url": "https://packagist.org/downloads/", 462 | "license": [ 463 | "BSD-3-Clause" 464 | ], 465 | "authors": [ 466 | { 467 | "name": "Greg Sherwood", 468 | "role": "Former lead" 469 | }, 470 | { 471 | "name": "Juliette Reinders Folmer", 472 | "role": "Current lead" 473 | }, 474 | { 475 | "name": "Contributors", 476 | "homepage": "https://github.com/PHPCSStandards/PHP_CodeSniffer/graphs/contributors" 477 | } 478 | ], 479 | "description": "PHP_CodeSniffer tokenizes PHP, JavaScript and CSS files and detects violations of a defined set of coding standards.", 480 | "homepage": "https://github.com/PHPCSStandards/PHP_CodeSniffer", 481 | "keywords": [ 482 | "phpcs", 483 | "standards", 484 | "static analysis" 485 | ], 486 | "support": { 487 | "issues": "https://github.com/PHPCSStandards/PHP_CodeSniffer/issues", 488 | "security": "https://github.com/PHPCSStandards/PHP_CodeSniffer/security/policy", 489 | "source": "https://github.com/PHPCSStandards/PHP_CodeSniffer", 490 | "wiki": "https://github.com/PHPCSStandards/PHP_CodeSniffer/wiki" 491 | }, 492 | "funding": [ 493 | { 494 | "url": "https://github.com/PHPCSStandards", 495 | "type": "github" 496 | }, 497 | { 498 | "url": "https://github.com/jrfnl", 499 | "type": "github" 500 | }, 501 | { 502 | "url": "https://opencollective.com/php_codesniffer", 503 | "type": "open_collective" 504 | } 505 | ], 506 | "time": "2024-02-16T15:06:51+00:00" 507 | }, 508 | { 509 | "name": "wp-coding-standards/wpcs", 510 | "version": "3.0.1", 511 | "source": { 512 | "type": "git", 513 | "url": "https://github.com/WordPress/WordPress-Coding-Standards.git", 514 | "reference": "b4caf9689f1a0e4a4c632679a44e638c1c67aff1" 515 | }, 516 | "dist": { 517 | "type": "zip", 518 | "url": "https://api.github.com/repos/WordPress/WordPress-Coding-Standards/zipball/b4caf9689f1a0e4a4c632679a44e638c1c67aff1", 519 | "reference": "b4caf9689f1a0e4a4c632679a44e638c1c67aff1", 520 | "shasum": "" 521 | }, 522 | "require": { 523 | "ext-filter": "*", 524 | "ext-libxml": "*", 525 | "ext-tokenizer": "*", 526 | "ext-xmlreader": "*", 527 | "php": ">=5.4", 528 | "phpcsstandards/phpcsextra": "^1.1.0", 529 | "phpcsstandards/phpcsutils": "^1.0.8", 530 | "squizlabs/php_codesniffer": "^3.7.2" 531 | }, 532 | "require-dev": { 533 | "php-parallel-lint/php-console-highlighter": "^1.0.0", 534 | "php-parallel-lint/php-parallel-lint": "^1.3.2", 535 | "phpcompatibility/php-compatibility": "^9.0", 536 | "phpcsstandards/phpcsdevtools": "^1.2.0", 537 | "phpunit/phpunit": "^4.0 || ^5.0 || ^6.0 || ^7.0" 538 | }, 539 | "suggest": { 540 | "ext-iconv": "For improved results", 541 | "ext-mbstring": "For improved results" 542 | }, 543 | "type": "phpcodesniffer-standard", 544 | "notification-url": "https://packagist.org/downloads/", 545 | "license": [ 546 | "MIT" 547 | ], 548 | "authors": [ 549 | { 550 | "name": "Contributors", 551 | "homepage": "https://github.com/WordPress/WordPress-Coding-Standards/graphs/contributors" 552 | } 553 | ], 554 | "description": "PHP_CodeSniffer rules (sniffs) to enforce WordPress coding conventions", 555 | "keywords": [ 556 | "phpcs", 557 | "standards", 558 | "static analysis", 559 | "wordpress" 560 | ], 561 | "support": { 562 | "issues": "https://github.com/WordPress/WordPress-Coding-Standards/issues", 563 | "source": "https://github.com/WordPress/WordPress-Coding-Standards", 564 | "wiki": "https://github.com/WordPress/WordPress-Coding-Standards/wiki" 565 | }, 566 | "funding": [ 567 | { 568 | "url": "https://opencollective.com/thewpcc/contribute/wp-php-63406", 569 | "type": "custom" 570 | } 571 | ], 572 | "time": "2023-09-14T07:06:09+00:00" 573 | } 574 | ], 575 | "aliases": [], 576 | "minimum-stability": "stable", 577 | "stability-flags": [], 578 | "prefer-stable": false, 579 | "prefer-lowest": false, 580 | "platform": [], 581 | "platform-dev": { 582 | "php": "^8.1" 583 | }, 584 | "platform-overrides": { 585 | "php": "8.1" 586 | }, 587 | "plugin-api-version": "2.6.0" 588 | } 589 | -------------------------------------------------------------------------------- /wp-plugin/lib/core.php: -------------------------------------------------------------------------------- 1 | main = $main; 26 | 27 | $this->init(); 28 | $this->hooks(); 29 | } 30 | 31 | /** 32 | * Stub function that can be overridden in child classes. 33 | */ 34 | public function init() {} 35 | 36 | /** 37 | * Stub function that can be overridden in child classes. 38 | */ 39 | public function hooks() {} 40 | } 41 | -------------------------------------------------------------------------------- /wp-plugin/lib/demo/enqueue.php: -------------------------------------------------------------------------------- 1 | plugins_url( '', WEBCOMPONENT_FILE ), 29 | ); 30 | 31 | $data = apply_filters( 'webcomponent_demo_inline_js', $data ); 32 | 33 | wp_add_inline_script( 34 | 'web-component-demo-js', 35 | sprintf( 36 | 'window.webcomponent = window.webcomponent||{};window.webcomponent.demo = window.webcomponent.demo||{};window.webcomponent.demo = Object.assign(window.webcomponent.demo, %s);', 37 | wp_json_encode( $data ) 38 | ), 39 | 'before' 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /wp-plugin/lib/demo/js/web-component-demo.js: -------------------------------------------------------------------------------- 1 | import '@you/web-component-demo'; -------------------------------------------------------------------------------- /wp-plugin/lib/demo/shortcode.php: -------------------------------------------------------------------------------- 1 | '; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /wp-plugin/lib/demo/start.php: -------------------------------------------------------------------------------- 1 | enqueue = new Webcomponent_Demo_Enqueue( $this->main ); 31 | $this->shortcode = new Webcomponent_Demo_Shortcode( $this->main ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /wp-plugin/lib/start.php: -------------------------------------------------------------------------------- 1 | demo = new Webcomponent_Demo_Start( $this ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /wp-plugin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wp-plugin", 3 | "version": "0.0.0", 4 | "description": "A Demo/Boilerplate for building web-components using Svelte for WordPress.", 5 | "private": true, 6 | "main": "web-component.php", 7 | "scripts": { 8 | "postinstall": "composer install", 9 | "build": "concurrently \"npm run build:*\"", 10 | "build:demo": "wp-scripts build ./lib/demo/js/web-component-demo.js --output-path=./assets/js", 11 | "bundle:win": "CMD.EXE /C .\\bundle.cmd", 12 | "bundle:nix": "sh ./bundle.sh" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/jonshipman/web-component.git" 17 | }, 18 | "author": "Jon Shipman ", 19 | "license": "ISC", 20 | "bugs": { 21 | "url": "https://github.com/jonshipman/web-component/issues" 22 | }, 23 | "homepage": "https://github.com/jonshipman/web-component#readme", 24 | "devDependencies": { 25 | "@you/web-component-demo": "0.0.0", 26 | "@wordpress/babel-preset-default": "^7.34.0", 27 | "@wordpress/prettier-config": "^3.5.0", 28 | "@wordpress/scripts": "^27.1.0", 29 | "concurrently": "^8.2.2", 30 | "prettier": "^3.1.1" 31 | }, 32 | "prettier": "@wordpress/prettier-config" 33 | } 34 | -------------------------------------------------------------------------------- /wp-plugin/phpcs.xml.dist: -------------------------------------------------------------------------------- 1 | 2 | 3 | Generally-applicable sniffs for WordPress plugins. 4 | 5 | 6 | . 7 | /vendor/ 8 | /node_modules/ 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /wp-plugin/web-component.php: -------------------------------------------------------------------------------- 1 | 7 | * Author URI: https://www.shaemarcus.com 8 | * Text Domain: webcomponent 9 | * Version: 1.0.0 10 | * 11 | * @package Web_Component 12 | */ 13 | 14 | // Define constants. 15 | define( 'WEBCOMPONENT_VERSION', '1.0.0' ); 16 | define( 'WEBCOMPONENT_FILE', __FILE__ ); 17 | define( 'WEBCOMPONENT_PATH', plugin_dir_path( __FILE__ ) ); 18 | define( 'WEBCOMPONENT_URL', plugin_dir_url( __FILE__ ) ); 19 | 20 | require_once __DIR__ . '/vendor/autoload.php'; 21 | 22 | spl_autoload_register( 'webcomponent_autoloader' ); 23 | 24 | /** 25 | * Loads classes from lib directory. 26 | * 27 | * @param string $class_name Class name being parsed. 28 | */ 29 | function webcomponent_autoloader( $class_name ) { 30 | $config = array( 31 | 'Webcomponent_Demo' => array( 'directory' => 'demo' ), 32 | 'Webcomponent' => array( 'directory' => '' ), 33 | ); 34 | 35 | foreach ( $config as $class_prefix => $options ) { 36 | if ( false !== strpos( $class_name, $class_prefix . '_' ) ) { 37 | $classes_dir = realpath( rtrim( WEBCOMPONENT_PATH . DIRECTORY_SEPARATOR . 'lib' . DIRECTORY_SEPARATOR . $options['directory'], DIRECTORY_SEPARATOR ) ); 38 | $sanitized_class_prefix = strtolower( str_replace( '_', '-', $class_prefix ) ); 39 | 40 | $class_file = strtolower( str_replace( '_', '-', $class_name ) ) . '.php'; 41 | $class_file = str_replace( $sanitized_class_prefix . '-', '', $class_file ); 42 | $class_file = $classes_dir . DIRECTORY_SEPARATOR . $class_file; 43 | 44 | if ( file_exists( $class_file ) ) { 45 | require_once $class_file; 46 | return; 47 | } 48 | } 49 | } 50 | } 51 | 52 | new Webcomponent_Start(); 53 | --------------------------------------------------------------------------------