@cocreate/plugins 1.2.1 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/.github/workflows/automated.yml +23 -11
  2. package/CHANGELOG.md +33 -0
  3. package/demo/index.html +67 -218
  4. package/package.json +10 -12
  5. package/release.config.js +11 -3
  6. package/src/index.js +193 -531
  7. package/src/operators.js +293 -0
package/.github/workflows/automated.yml CHANGED
@@ -1,8 +1,10 @@
1
1
  name: Automated Workflow
2
+
2
3
  on:
3
4
  push:
4
5
  branches:
5
6
  - master
7
+
6
8
  jobs:
7
9
  about:
8
10
  runs-on: ubuntu-latest
@@ -18,27 +20,37 @@ jobs:
18
20
  with:
19
21
  direction: overwrite-github
20
22
  githubToken: "${{ secrets.GITHUB }}"
23
+
21
24
  release:
22
25
  runs-on: ubuntu-latest
23
26
  steps:
24
27
  - name: Checkout
25
28
  uses: actions/checkout@v4
29
+ with:
30
+ fetch-depth: 0 # Required so semantic-release can trace git tags/history
31
+
26
32
  - name: Setup Node.js
27
33
  uses: actions/setup-node@v4
28
34
  with:
29
- node-version: 22 # Required for the latest semantic-release plugins
30
- - name: Semantic Release
31
- uses: cycjimmy/semantic-release-action@v4 # Update to v4 for better Node 20+ support
32
- id: semantic
33
- with:
34
- extra_plugins: |
35
- @semantic-release/changelog
35
+ node-version: 22
36
+
37
+ - name: Install Semantic Release & Plugins
38
+ # Installs semantic-release and its plugins on the runner
39
+ run: |
40
+ npm install -g semantic-release \
41
+ @semantic-release/changelog \
42
+ @semantic-release/npm \
43
+ @semantic-release/github \
36
44
  @semantic-release/git
37
- @semantic-release/github
45
+
46
+ - name: Run Semantic Release (Native)
47
+ id: semantic
48
+ # This will automatically pick up your export default config file in the repository root
49
+ run: npx semantic-release
38
50
  env:
39
- GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}" # Use the built-in token if possible
51
+ GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
40
52
  NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
53
+
41
54
  outputs:
42
55
  new_release_published: "${{ steps.semantic.outputs.new_release_published }}"
43
- new_release_version: "${{ steps.semantic.outputs.new_release_version }}"
44
-
56
+ new_release_version: "${{ steps.semantic.outputs.new_release_version }}"
package/CHANGELOG.md CHANGED
@@ -1,3 +1,36 @@
1
+ # [1.4.0](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.3.1...v1.4.0) (2026-07-17)
2
+
3
+
4
+ ### Features
5
+
6
+ * enhance plugin initialization and resource preloading logic ([ee17bc1](https://github.com/CoCreate-app/CoCreate-plugins/commit/ee17bc12b47c09085cd2527ef18a6fce36f21123))
7
+ * improve plugin processing and operator execution logic ([486faa8](https://github.com/CoCreate-app/CoCreate-plugins/commit/486faa81839a49d4958ccb75721b161102cc0168))
8
+ * update automated workflow and release configuration for improved semantic release handling ([06e65c9](https://github.com/CoCreate-app/CoCreate-plugins/commit/06e65c9eddd29398f3bd824e295089722faf9fad))
9
+
10
+ ## [1.3.1](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.3.0...v1.3.1) (2026-07-11)
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * bump package versions ([3f992ea](https://github.com/CoCreate-app/CoCreate-plugins/commit/3f992ea145328efac344e4f470fe19a87d5209e9))
16
+ * clean attribute name for method matching in processPlugin function ([7389d12](https://github.com/CoCreate-app/CoCreate-plugins/commit/7389d12bd6f4206c506456d64341ceef4b304313))
17
+ * correct minor typos in code comments and variable names for clarity. ([7e43622](https://github.com/CoCreate-app/CoCreate-plugins/commit/7e4362289c9f51ac6673873802d5b58a7992638e))
18
+ * demo plugin initialization syntax and remove redundant tests ([c126bc8](https://github.com/CoCreate-app/CoCreate-plugins/commit/c126bc87edfb9669ea6c8a79e13a0cd0c09a1bd3))
19
+ * removed post install and add add packages to apprved list ([548be97](https://github.com/CoCreate-app/CoCreate-plugins/commit/548be977ba710af907ad8e95f7ebcd3a75462326))
20
+ * semantic version handling ([7606d54](https://github.com/CoCreate-app/CoCreate-plugins/commit/7606d54cd447a3cf10c3f86d54bca1f0aa7fe1a1))
21
+
22
+ # [1.3.0](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.2.1...v1.3.0) (2026-03-11)
23
+
24
+
25
+ ### Bug Fixes
26
+
27
+ * Update demo/index.html to test sequential execution of attributes as logic ([d71e0a5](https://github.com/CoCreate-app/CoCreate-plugins/commit/d71e0a562bc48337746583a04bf230f84134f6c7))
28
+
29
+
30
+ ### Features
31
+
32
+ * Refactor plugin initialization to sequentially load resources and execute attributes in DOM order. Add support for direct $this references in attributes. Improve error handling and logging during plugin execution. ([08ecdb2](https://github.com/CoCreate-app/CoCreate-plugins/commit/08ecdb2b2bb8bba2cf3950eb2ef5e7ac77916203))
33
+
1
34
  ## [1.2.1](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.2.0...v1.2.1) (2026-03-02)
2
35
 
3
36
 
package/demo/index.html CHANGED
@@ -1,230 +1,79 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <title>Plugins API Demo</title>
5
- <meta charset="utf-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1">
7
- <link rel="manifest" href="/manifest.webmanifest" />
8
-
9
- <!-- Bootstrap 5 CSS for Demo Presentation -->
10
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
11
-
12
- <style>
13
- body { background-color: #f8f9fa; padding-bottom: 50px; }
14
- .demo-card { margin-bottom: 2rem; border: none; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
15
- .card-header { background-color: #fff; border-bottom: 1px solid #eee; padding: 1.5rem; }
16
- .operator-badge { font-family: monospace; background: #e9ecef; color: #d63384; padding: 2px 6px; border-radius: 4px; }
17
- </style>
18
- </head>
19
- <body>
3
+ <head>
4
+ <title>Plugins API Test Suite</title>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+
8
+ <!-- UI Framework for Demo -->
9
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
10
+
11
+ <!-- Library CSS (Toastify) -->
12
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
13
+
14
+ <style>
15
+ :root {
16
+ --primary-color: #0d6efd;
17
+ }
18
+ body { background-color: #f8fafc; padding-top: 50px; padding-bottom: 100px; font-family: system-ui, -apple-system, sans-serif; }
19
+ .card { border: none; border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); margin-bottom: 2rem; }
20
+ .card-header { background: #fff; border-bottom: 1px solid #e2e8f0; font-weight: 600; padding: 1.25rem; }
21
+ .code-block { background: #1e293b; color: #f1f5f9; padding: 1rem; border-radius: 8px; font-family: 'Fira Code', monospace; font-size: 0.85rem; margin-top: 1rem; overflow-x: auto; }
22
+ .live-preview { background: #fff; border: 2px dashed #e2e8f0; border-radius: 8px; padding: 2rem; display: flex; align-items: center; justify-content: center; min-height: 140px; }
23
+ .badge-sequential { background-color: #dcfce7; color: #166534; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 9999px; font-weight: 600; margin-bottom: 0.5rem; display: inline-block; }
24
+ </style>
25
+ </head>
26
+ <body>
20
27
 
21
- <div class="container py-5">
22
- <div class="row mb-4">
23
- <div class="col-12 text-center">
24
- <h1 class="display-5 fw-bold text-primary">CoCreate Plugins API</h1>
25
- <p class="lead text-muted">A declarative, attribute-based system for initializing and configuring JavaScript libraries.</p>
26
- </div>
27
- </div>
28
+ <div class="container" style="max-width: 800px;">
29
+ <div class="text-center mb-5">
30
+ <h1 class="fw-bold">Linear Execution Test Suite</h1>
31
+ <p class="text-muted">Testing the sequential processing of HTML attributes as logic.</p>
32
+ </div>
28
33
 
29
- <!-- SECTION 1: THE BASICS -->
30
- <div class="row">
31
- <div class="col-12">
32
- <div class="card demo-card">
33
- <div class="card-header">
34
- <h4 class="m-0">1. The Basics: Declarative Initialization</h4>
35
- </div>
36
- <div class="card-body">
37
- <p>Initialize any supported plugin using the <code>plugin="PluginName"</code> attribute. Configure it using the lowercase attribute matching the plugin name (e.g., <code>pluginname="{ options }"</code>).</p>
38
-
39
- <div class="row align-items-center">
40
- <div class="col-md-6">
41
- <h6 class="text-muted text-uppercase fs-7 fw-bold mb-3">Live Demo</h6>
42
- <!-- Toastify Example -->
43
- <button
44
- type="button"
45
- class="btn btn-success"
46
- plugin="Toastify"
47
- toastify='{
48
- "text": "Hello! I am a declarative toast.",
49
- "duration": 3000,
50
- "gravity": "top",
51
- "position": "right",
52
- "style": { "background": "#198754" }
53
- }'
54
- onclick="this.Toastify.showToast()">
55
- Click me to Show Toast
56
- </button>
57
- </div>
58
- <div class="col-md-6">
59
- <h6 class="text-muted text-uppercase fs-7 fw-bold mb-3">Code</h6>
60
- <pre><code class="language-html">&lt;button
61
- plugin="Toastify"
62
- toastify='{
63
- "text": "Hello!",
64
- "duration": 3000,
65
- "style": { "background": "#198754" }
66
- }'
67
- onclick="this.Toastify.showToast()"&gt;
68
- Click Me
69
- &lt;/button&gt;</code></pre>
70
- </div>
71
- </div>
72
- </div>
73
- </div>
34
+ <!-- TEST 1: Dot-Notation + Method Execution -->
35
+ <div class="card">
36
+ <div class="card-header">1. Sequential Property & Method Call</div>
37
+ <div class="card-body">
38
+ <p class="text-secondary small">This button sets multiple properties on the Toastify instance and then calls the execution method, all in order.</p>
39
+ <div class="live-preview flex-column">
40
+ <button type="button" class="btn btn-primary px-4"
41
+ plugin='{
42
+ "Toastify": {
43
+ "text": "Hello from a single object!",
44
+ "duration": 3000,
45
+ "style": {
46
+ "background": "#0d6efd"
47
+ }
48
+ },
49
+ "Toastify.showToast": []
50
+ }'>
51
+ Trigger Sequential Toast
52
+ </button>
53
+ <div class="code-block w-100">
54
+ plugin='{<br>
55
+ &nbsp;&nbsp;"Toastify": {<br>
56
+ &nbsp;&nbsp;&nbsp;&nbsp;"text": "...",<br>
57
+ &nbsp;&nbsp;&nbsp;&nbsp;"duration": 3000<br>
58
+ &nbsp;&nbsp;},<br>
59
+ &nbsp;&nbsp;"Toastify.showToast": []<br>
60
+ }'
61
+ </div>
74
62
  </div>
75
63
  </div>
64
+ </div>
76
65
 
77
- <!-- SECTION 2: OPERATORS & VARIABLES -->
78
- <div class="row">
79
- <div class="col-12">
80
- <div class="card demo-card">
81
- <div class="card-header">
82
- <h4 class="m-0">2. Variable Operators</h4>
83
- </div>
84
- <div class="card-body">
85
- <p>The API supports special variables to reference DOM elements and global objects dynamically within your JSON configuration.</p>
86
-
87
- <div class="table-responsive mb-4">
88
- <table class="table table-bordered">
89
- <thead class="table-light">
90
- <tr>
91
- <th>Operator</th>
92
- <th>Description</th>
93
- <th>Usage Example</th>
94
- </tr>
95
- </thead>
96
- <tbody>
97
- <tr>
98
- <td><span class="operator-badge">$this</span></td>
99
- <td>References the current DOM element where the attribute is placed.</td>
100
- <td><code>"element": "$this"</code></td>
101
- </tr>
102
- <tr>
103
- <td><span class="operator-badge">$window</span></td>
104
- <td>Accesses the global <code>window</code> object (useful for callbacks).</td>
105
- <td><code>"callback": "$window.console.log"</code></td>
106
- </tr>
107
- </tbody>
108
- </table>
109
- </div>
110
-
111
- <!-- RaterJs Example ($this) -->
112
- <div class="border rounded p-3 bg-light mb-3">
113
- <h5 class="mb-3">Example: Using <code>$this</code> for Element Binding</h5>
114
- <div class="row">
115
- <div class="col-md-6">
116
- <!-- RaterJs Implementation -->
117
- <div dir="ltr"
118
- plugin="raterJs"
119
- raterjs='[{
120
- "element": "$this",
121
- "starSize": 32,
122
- "rating": 3.5,
123
- "step": 0.5
124
- }]'>
125
- </div>
126
- </div>
127
- <div class="col-md-6">
128
- <pre><code class="language-html">&lt;div
129
- plugin="raterJs"
130
- raterjs='[{
131
- "element": "$this",
132
- "starSize": 32,
133
- "rating": 3.5
134
- }]'&gt;
135
- &lt;/div&gt;</code></pre>
136
- </div>
137
- </div>
138
- </div>
139
66
 
140
- </div>
141
- </div>
142
- </div>
143
- </div>
67
+ </div>
144
68
 
145
- <!-- SECTION 3: CONFIGURATION PATTERNS -->
146
- <div class="row">
147
- <div class="col-12">
148
- <div class="card demo-card">
149
- <div class="card-header">
150
- <h4 class="m-0">3. Configuration Patterns (Array vs. Object)</h4>
151
- </div>
152
- <div class="card-body">
153
- <p>Plugins have different constructor signatures. The API handles both by inspecting the JSON structure.</p>
154
-
155
- <div class="row">
156
- <div class="col-md-6">
157
- <div class="card h-100 bg-light border-0">
158
- <div class="card-body">
159
- <h6 class="fw-bold">Pattern A: Single Config Object</h6>
160
- <p class="small text-muted">Used when the plugin accepts a single object containing all settings (e.g., <code>raterJs({ element: div })</code>).</p>
161
- <hr>
162
- <code>config='[{ "element": "$this", "opt": "val" }]'</code>
163
- <br><small class="text-danger">*Note: Enclosed in an array to represent arguments list.</small>
164
- </div>
165
- </div>
166
- </div>
167
- <div class="col-md-6">
168
- <div class="card h-100 bg-light border-0">
169
- <div class="card-body">
170
- <h6 class="fw-bold">Pattern B: Argument List</h6>
171
- <p class="small text-muted">Used when the plugin accepts multiple distinct arguments (e.g., <code>Swiper(element, options)</code>).</p>
172
- <hr>
173
- <code>config='["$this", { "opt": "val" }]'</code>
174
- </div>
175
- </div>
176
- </div>
177
- </div>
178
- </div>
179
- </div>
180
- </div>
181
- </div>
182
-
183
- <!-- SECTION 4: ADVANCED (Callbacks) -->
184
- <div class="row">
185
- <div class="col-12">
186
- <div class="card demo-card">
187
- <div class="card-header">
188
- <h4 class="m-0">4. Advanced: Callbacks & Global Functions</h4>
189
- </div>
190
- <div class="card-body">
191
- <p>Use <code>$window</code> or specific global names (like <code>$Swal</code>) to pass functions into configuration attributes.</p>
192
-
193
- <div class="row align-items-center">
194
- <div class="col-md-6">
195
- <!-- SweetAlert Example -->
196
- <button
197
- type="button"
198
- class="btn btn-primary"
199
- onclick="Swal.fire({
200
- title: 'Are you sure?',
201
- text: 'You can define this entire config in HTML!',
202
- icon: 'warning',
203
- showCancelButton: true,
204
- confirmButtonText: 'Yes, delete it!'
205
- })">
206
- Trigger SweetAlert
207
- </button>
208
- </div>
209
- <div class="col-md-6">
210
- <pre><code class="language-html">&lt;button
211
- onclick="Swal.fire({
212
- title: 'Ready?',
213
- preConfirm: '$window.myCustomFunction'
214
- }) &gt;
215
- Launch
216
- &lt;/button&gt;</code></pre>
217
- </div>
218
- </div>
219
- </div>
220
- </div>
221
- </div>
222
- </div>
223
-
224
- </div>
69
+ <!-- CoCreate JS Bundle (Contains plugin.js and operatorEngine.js) -->
70
+ <script src="../../../CoCreateJS/src/dist/CoCreate.js"></script>
225
71
 
226
- <!-- CoCreate Engine -->
227
- <script src="https://CoCreate.app/dist/CoCreate.js"></script>
72
+ <!-- External Plugin Library -->
73
+ <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
228
74
 
229
- </body>
75
+ <script type="module">
76
+ console.log("Test Suite Ready. The 'plugin.js' sequencer will now process attributes in order.");
77
+ </script>
78
+ </body>
230
79
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/plugins",
3
- "version": "1.2.1",
3
+ "version": "1.4.0",
4
4
  "description": "CoCreate plugins",
5
5
  "author": "CoCreate LLC",
6
6
  "license": "AGPL-3.0",
@@ -10,8 +10,7 @@
10
10
  "scripts": {
11
11
  "start": "npx webpack --config webpack.config.js",
12
12
  "build": "npx webpack --mode=production --config webpack.config.js",
13
- "dev": "npx webpack --config webpack.config.js --watch",
14
- "postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\""
13
+ "dev": "npx webpack --config webpack.config.js --watch"
15
14
  },
16
15
  "repository": {
17
16
  "type": "git",
@@ -26,16 +25,15 @@
26
25
  "url": "https://github.com/sponsors/CoCreate-app"
27
26
  },
28
27
  "main": "./src/index.js",
28
+ "dependencies": {
29
+ "@cocreate/observer": "^1.19.0"
30
+ },
29
31
  "devDependencies": {
30
- "css-loader": "^5.1.3",
31
- "esbuild": "^0.25.2",
32
- "esbuild-loader": "^4.3.0",
33
- "mini-css-extract-plugin": "^1.5.0",
34
- "webpack": "^5.24.4",
35
- "webpack-cli": "^4.5.0",
36
- "webpack-log": "^3.0.1"
32
+ "@cocreate/webpack": "^1.4.3"
37
33
  },
38
- "dependencies": {
39
- "@cocreate/observer": "^1.18.3"
34
+ "allowScripts": {
35
+ "@cocreate/observer@1.19.0": true,
36
+ "@cocreate/utils@1.42.2": true,
37
+ "@cocreate/webpack@1.4.3": true
40
38
  }
41
39
  }
package/release.config.js CHANGED
@@ -10,12 +10,20 @@ module.exports = {
10
10
  changelogFile: "CHANGELOG.md",
11
11
  },
12
12
  ],
13
- "@semantic-release/npm",
14
- "@semantic-release/github",
13
+ "@semantic-release/npm",
15
14
  [
16
- "@semantic-release/git",
15
+ "@semantic-release/github",
17
16
  {
17
+ successComment: false,
18
+ failTitle: false,
19
+ },
20
+ ],
21
+ [
22
+ "@semantic-release/git",
23
+ {
24
+ // Only stage and commit the changelog and package.json
18
25
  assets: ["CHANGELOG.md", "package.json"],
26
+ message: "chore(release): ${nextRelease.version} [skip ci]",
19
27
  },
20
28
  ],
21
29
  ],