Penpot/penpot-plugins
0
Fork 0
mirror of https://github.com/penpot/penpot-plugins.git synced 2025-01-06 14:50:21 -05:00
Code Issues Activity

feat: new plugin to test read properties

Browse source
This commit is contained in:
alonso.torres 2024-03-20 11:47:49 +01:00 committed by Alonso Torres
parent de95acd352
commit 3f160f05d6
18 changed files with 395 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
apps/poc-state-read-plugin/.babelrc Normal file
View file

@ -0,0 +1,3 @@
{
"presets": ["@nx/js/babel"]
}

22
apps/poc-state-read-plugin/.eslintrc.json Normal file
View file

@ -0,0 +1,22 @@
{
"extends": ["../../.eslintrc.json"],
"ignorePatterns": ["!**/*", "vite.config.ts"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./apps/poc-state-read-plugin/tsconfig.app.json"
},
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {}
},
{
"files": ["*.ts", "*.tsx"],
"rules": {}
},
{
"files": ["*.js", "*.jsx"],
"rules": {}
}
]
}

8
apps/poc-state-read-plugin/.swcrc Normal file
View file

@ -0,0 +1,8 @@
{
"jsc": {
"parser": {
"syntax": "typescript"
},
"target": "es2016"
}
}

16
apps/poc-state-read-plugin/index.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>State Read Plugin</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" href="/src/styles.css" />
</head>
<body>
<app-root></app-root>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

8
apps/poc-state-read-plugin/project.json Normal file
View file

@ -0,0 +1,8 @@
{
"name": "poc-state-read-plugin",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"sourceRoot": "apps/poc-state-read-plugin/src",
"tags": ["type:plugin"],
"targets": {}
}

BIN
apps/poc-state-read-plugin/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

9
apps/poc-state-read-plugin/public/manifest.json Normal file
View file

@ -0,0 +1,9 @@
{
"name": "POC State Read",
"code": "http://localhost:4202/plugin.js",
"permissions": [
"page:read",
"file:read",
"selection:read"
]
}

69
apps/poc-state-read-plugin/src/app/app.element.css Normal file
View file

@ -0,0 +1,69 @@
html {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
line-height: 1.5;
tab-size: 4;
scroll-behavior: smooth;
}
body {
font-family: inherit;
line-height: inherit;
margin: 0;
}
h1,
h2,
p,
pre {
margin: 0;
}
*,
::before,
::after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: currentColor;
}
h1,
h2 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace;
}
svg {
display: block;
vertical-align: middle;
}
svg {
shape-rendering: auto;
text-rendering: optimizeLegibility;
}
.wrapper {
width: 100%;
}
p {
margin-block-end: var(--spacing-12);
}
h1 {
font-size: 20px;
margin-block-end: var(--spacing-12);
}
.help {
color: #6b7280;
display: block;
font-size: 11px;
padding-inline-start: var(--spacing-12);
}

75
apps/poc-state-read-plugin/src/app/app.element.ts Normal file
View file

@ -0,0 +1,75 @@
/* eslint-disable */
import 'plugins-styles/lib/styles.css';
import './app.element.css';
export class AppElement extends HTMLElement {
public static observedAttributes = [];
#selection = '';
#pageId = '';
#fileId = '';
#revn = 0;
refreshPage(pageId: string, name: string) {
console.log('refreshPage', pageId, name);
const projectName = document.getElementById('project-name');
this.#pageId = pageId;
if (projectName) {
projectName.innerText = name;
}
}
refreshSelectionId(selection: string[]) {
this.#selection = selection;
const selectionId = document.getElementById('selection-id');
if (selectionId) {
console.log(this.#selection);
selectionId.innerText = [...this.#selection].join(",");
}
}
connectedCallback() {
window.addEventListener('message', (event) => {
if (event.data.type === 'file') {
this.#fileId = event.data.content.id;
this.#revn = event.data.content.revn;
} else if (event.data.type === 'page') {
this.refreshPage(event.data.content.id, event.data.content.name);
} else if (event.data.type === 'selection') {
this.refreshSelectionId(event.data.content);
} else if (event.data.type === 'init') {
this.#fileId = event.data.content.fileId;
this.#revn = event.data.content.revn;
this.refreshPage(event.data.content.pageId, event.data.content.name);
this.refreshSelectionId(event.data.content.selection);
this.setAttribute('data-theme', event.data.content.theme);
} else if (event.data.type === 'theme') {
this.setAttribute('data-theme', event.data.content);
}
});
this.innerHTML = `
<div class="wrapper">
<h1>Test area!</h1>
<p>Current project name: <span id="project-name">Unknown</span></p>
<p>Selection id: <span id="selection-id">Unknown</span></p>
<p>
<button type="button" data-appearance="primary" data-variant="destructive" class="act-close-plugin">Close plugin</button>
</p>
</div>
`;
const closeAction = this.querySelector<HTMLElement>('.act-close-plugin');
closeAction?.addEventListener('click', () => {
parent.postMessage({ content: 'close' }, '*');
});
parent.postMessage({ content: 'ready' }, '*');
}
}
customElements.define('app-root', AppElement);

0
apps/poc-state-read-plugin/src/assets/.gitkeep Normal file
View file

1
apps/poc-state-read-plugin/src/main.ts Normal file
View file

@ -0,0 +1 @@
import './app/app.element';

58
apps/poc-state-read-plugin/src/plugin.ts Normal file
View file

@ -0,0 +1,58 @@
penpot.ui.open('Plugin name', 'http://localhost:4202', {
width: 500,
height: 600,
});
penpot.ui.onMessage<{ content: string }>((message) => {
if (message.content === 'close') {
penpot.closePlugin();
} else if (message.content === 'ready') {
const pageState = penpot.getPageState();
const fileState = penpot.getFileState();
if (!pageState || !fileState) {
return;
}
penpot.ui.sendMessage({
type: 'init',
content: {
name: pageState.name,
pageId: pageState.id,
fileId: fileState.id,
revn: fileState.revn,
theme: penpot.getTheme(),
selection: penpot.getSelection(),
},
});
}
});
penpot.on('pagechange', (page) => {
penpot.ui.sendMessage({
type: 'page',
content: {
name: page.name,
id: page.id,
},
});
});
penpot.on('filechange', (file) => {
penpot.ui.sendMessage({
type: 'file',
content: {
name: file.name,
id: file.id,
revn: file.revn,
},
});
});
penpot.on('selectionchange', (selection) => {
penpot.ui.sendMessage({ type: 'selection', content: [...selection] });
});
penpot.on('themechange', (theme) => {
penpot.ui.sendMessage({ type: 'theme', content: theme });
});

1
apps/poc-state-read-plugin/src/styles.css Normal file
View file

@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */

9
apps/poc-state-read-plugin/tsconfig.app.json Normal file
View file

@ -0,0 +1,9 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"types": ["node"]
},
"exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"],
"include": ["src/**/*.ts", "../../libs/plugins-runtime/src/lib/index.d.ts"]
}

30
apps/poc-state-read-plugin/tsconfig.json Normal file
View file

@ -0,0 +1,30 @@
{
"extends": "../../tsconfig.base.json",
"files": [],
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ESNext", "DOM"],
"moduleResolution": "Node",
"strict": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"skipLibCheck": true,
"types": ["vite/client"]
},
"include": ["src"],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}

26
apps/poc-state-read-plugin/tsconfig.spec.json Normal file
View file

@ -0,0 +1,26 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../dist/out-tsc",
"types": [
"vitest/globals",
"vitest/importMeta",
"vite/client",
"node",
"vitest"
]
},
"include": [
"vite.config.ts",
"vitest.config.ts",
"src/**/*.test.ts",
"src/**/*.spec.ts",
"src/**/*.test.tsx",
"src/**/*.spec.tsx",
"src/**/*.test.js",
"src/**/*.spec.js",
"src/**/*.test.jsx",
"src/**/*.spec.jsx",
"src/**/*.d.ts"
]
}

59
apps/poc-state-read-plugin/vite.config.ts Normal file
View file

@ -0,0 +1,59 @@
/// <reference types='vitest' />
import { defineConfig } from 'vite';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
export default defineConfig({
root: __dirname,
cacheDir: '../../node_modules/.vite/apps/example-plugin',
server: {
port: 4200,
host: 'localhost',
},
preview: {
port: 4202,
host: 'localhost',
},
plugins: [nxViteTsPaths()],
// Uncomment this if you are using workers.
// worker: {
// plugins: [ nxViteTsPaths() ],
// },
build: {
outDir: '../../dist/apps/poc-state-read-plugin',
reportCompressedSize: true,
commonjsOptions: {
transformMixedEsModules: true,
},
rollupOptions: {
input: {
plugin: 'src/plugin.ts',
index: './index.html',
},
output: {
entryFileNames: '[name].js',
},
},
sourcemap: true,
},
test: {
globals: true,
cache: {
dir: '../../node_modules/.vitest',
},
environment: 'jsdom',
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
reporters: ['default'],
coverage: {
reportsDirectory: '../../coverage/apps/poc-state-read-plugin',
provider: 'v8',
},
},
});

1
package.json
View file

@ -5,6 +5,7 @@
"scripts": {
"start": "npx nx run plugins-runtime:build --watch & npx nx run plugins-runtime:preview",
"start:example": "npx nx run example-plugin:build --watch & npx nx run example-plugin:preview",
"start:read-plugin": "npx nx run poc-state-read-plugin:build --watch & npx nx run poc-state-read-plugin:preview",
"start:rpc-api": "npx nx serve rpc-api",
"start:styles-example": "npx nx run example-styles:serve --port 4202",
"build": "npx nx build plugins-runtime --emptyOutDir=true",