@peter.naydenov/cuts 2.0.2 → 2.0.3

package/test-e2e/node_modules/@peter.naydenov/visual-controller-for-vue3/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@peter.naydenov/visual-controller-for-vue3",
+  "description": "Use it when single javascript application should control multiple vue3 apps.",
+  "version": "2.1.7",
+  "license": "MIT",
+  "author": "Peter Naydenov",
+  "main": "./dist/visual-controller-for-vue3.umd.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/visual-controller-for-vue3.esm.mjs",
+      "require": "./dist/visual-controller-for-vue3.cjs",
+      "default": "./dist/visual-controller-for-vue3.umd.js"
+    },
+    "./package.json": "./package.json",
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "rollup -c",
+    "preview": "vite preview",
+    "test": "cypress run --component --browser chrome"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/PeterNaydenov/visual-controller-for-vue3.git"
+  },
+  "dependencies": {
+    "ask-for-promise": "^3.1.0"
+  },
+  "devDependencies": {
+    "@peter.naydenov/notice": "^2.4.1",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "cypress": "^15.5.0",
+    "rollup": "^4.52.5",
+    "vite": "^7.1.6",
+    "vue": "^3.5.22"
+  }
+}

package/test-e2e/node_modules/@peter.naydenov/visual-controller-for-vue3/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/test-e2e/node_modules/@peter.naydenov/visual-controller-for-vue3/readme.md

@@ -0,0 +1,233 @@
+# Visual Controller for Vue 3
+
+Tool for building a micro-frontends(MFE) based on Vue 3 components - Start multiple Vue 3 applications on the same HTML page and control them.
+
+Install visual controller:
+```
+npm i @peter.naydenov/visual-controller-for-vue3
+```
+
+Initialization process:
+```js
+import notice from '@peter.naydenov/notice'
+import VisualController from '@peter.naydenov/visual-controller-for-vue3'
+// if you are using commonjs:
+// const VisualController = require ( '@peter.naydenov/visual-controller-for-vue3' )
+
+let 
+      eBus = notice ()        // Notice docs:  https://github.com/PeterNaydenov/notice
+    , dependencies = { eBus } // Provide to dependency object everything that should be exposed to components 
+    , html = new VisualController ( dependencies )   
+    ;
+// Ready for use...
+```
+
+Let's show something on the screen:
+```js
+// Let's have vue component 'Hello' with prop 'greeting'
+
+html.publish ( Hello, {greeting:'Hi'}, 'app' )
+//arguments are: ( component, props, containerID )
+```
+
+## Inside of the Components
+*Note: If your component should be displayed only, that section can be skipped.*
+
+If access to your external libraries needed, please inject `dependecies` object. All provided libraries during visualController initialization are available plus one special method `setupUpdates`. The method could set an interface for external component manipulation.
+
+```vue
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+import { inject, ref } from 'vue'
+
+const { eBus, setupUpdates } = inject ( 'dependencies' );   // Here you can get your dependency object.
+//            ^^^^^^^^^^^^
+//              This method is coming as an extra dependency content. You can define here functions that can 
+//              manipulate your component from outside of vue-app. 
+let message = ref('Vite + Vue');
+
+eBus.emit ( 'check' )
+
+setupUpdates ({   // Provides to visualContoller method 'changeMessage' 
+      changeMessage:  msg => message.value = msg
+    })    
+</script>
+```
+The external call will look like this:
+
+```js
+html.getApp ( 'app' ).changeMessage ( 'New message content' ) 
+```
+
+
+
+## Visual Controller Methods
+```js
+  publish : 'Render vue app in container. Associate app instance with the container.'
+, getApp  : 'Returns app instance by container name'
+, destroy : 'Destroy app by using container name '
+, has     : 'Checks if app with specific "id" was published'
+```
+
+
+
+### VisualController.publish ()
+Publish vue app.
+```js
+html.publish ( component, props, containerID )
+```
+- **component**: *object*. Vue component
+- **props**: *object*. Vue components props
+- **containerID**: *string*. Id of the container where vue-app will live.
+
+Example:
+```js
+ let html = new VisualController ();
+ html.publish ( Hi, { greeting: 'hi'}, 'app' )
+```
+
+Render component 'Hi' with prop 'greeting' and render it in html element with id "app".
+
+
+
+
+
+### VisualController.getApp ()
+Returns the library of functions provided from method `setupUpdates`. If setupUpdates was not called from the vue-app, result will be an empty object.
+
+```js
+ let controls = html.getApp ( containerID )
+```
+- **containerID**: *string*. Id of the container.
+
+Example:
+```js
+let 
+      id = 'videoControls'
+    , controls = html.getApp ( id ) 
+    ;
+    // if app with 'id' doesn't exist -> returns false, 
+    // if app exists and 'setupUpdates' was not used -> returns {}
+    // in our case -> returns { changeMessage:f }
+if ( controls )   controls.changeMessage ( 'Hello from outside' )
+else { // component is not available
+       console.error ( `App for id:"${id}" is not available` )
+   }
+```
+
+If visual controller(html) has a vue app associated with this name will return it. Otherwise will return **false**.
+
+
+
+
+
+### VisualController.destroy ()
+Will destroy vue app associated with this container name and container will become empty. Function will return 'true' on success
+and 'false' on failure. 
+Function will not delete content of provided container if there is no vue app associated with it.
+
+```js
+html.destroy ( containerID )
+```
+- **containerID**: *string*. Id name.
+
+## Other details and requirements
+
+- Support for Autonomous Custom Elements ( after v.1.1.0 ). Add a prop named `isCustomElement`. Should be a function.
+
+```js
+let isCustomElement = tag => tag === 'plastic-button';   // Will ignore tags 'plastic-button' during vue- render process. 
+
+html.publish ( Hi, { greeting: 'hi', isCustomElement}, 'app' )
+
+//custom elements for AWS Amplify service will look like
+let amplfiyCustom = tag => tag.startsWith ( 'amplify-' )
+html.publish ( Hi, {greeting:'hi', isCustomElement: amplifyCustom}, 'app' )
+```
+ 
+
+
+
+
+## Extra
+
+Visual Controller has versions for few other front-end frameworks:
+- [React](https://github.com/PeterNaydenov/visual-controller-for-react) 
+- [Vue 2](https://github.com/PeterNaydenov/visual-controller-for-vue)
+- [Svelte](https://github.com/PeterNaydenov/visual-controller-for-svelte3)
+
+
+
+
+
+## Release History
+
+
+
+### 2.1.7 (2025-10-30)
+- [x] Dependencies update. Ask for Promise - v.3.1.0;
+
+
+
+### 2.1.6 (2025-07-18)
+- [x] Vue was moved to devDependencies. Update to v.3.5.18
+
+
+
+### 2.1.5 (2025-07-18)
+- [x] Dependencies update. Vue - v.3.5.17;
+
+
+
+### 2.1.4 ( 2024-12-20)
+- [x] Dependencies update. Ask for Promise - v.3.0.1;
+
+
+
+### 2.1.1 ( 2024-06-06)
+- [x] Dependencies update. Vue - v.3.4.27;
+- [x] Dev dependencies update. Vite - v.5.2.12, Cypress - v.13.11.0, Rollup - v.4.18.0;
+
+
+
+### 2.1.0 ( 2024-03-13)
+- [x]  Folder 'dist' was added to the project. Includes commonjs, umd and esm versions of the library;
+- [x] Package.json: "exports" section was added. Allows you to use package as commonjs or es6 module without additional configuration;
+- [x] Rollup was added to the project. Used to build the library versions;
+
+
+
+### 2.0.4 ( 2023-11-10)
+- [x] Dependencies update. Vue - v.3.3.8;
+- [x] Dev. dependencies update. Vite - v.4.5.0;
+- [x] Dev. dependencies update. Cypress - v.13.5.0;
+- [x] Dev. dependencies update. @vitejs/plugin-vue - 4.4.1;
+
+
+### 2.0.3 ( 2023-11-06)
+- [x] Dependencies update. Vue - v.3.3.7
+- [x] Dependencies update. ask-for-promise - v.1.5.0
+
+
+
+### 2.0.2 ( 2023-10-22)
+- [x] Dependencies update. Vue - v.3.3.6
+
+
+
+### 2.0.1 (2023-10-21)
+- [x] Dependencies update. ask-for-css - v.1.4.0
+
+
+
+
+### 2.0.0 ( 2022-11-21)
+- [x] Full rewrite of the library;
+- [x] Method 'has' was added;
+- [x] Support for SSR hydration;
+
+### 1.1.1 ( 2021-04-25)
+ - [x] Support for Autonomous Custom Elements
+
+### 1.0.2 (2021-03-15)
+ - [x] Fix: Only one load per component;

package/test-e2e/node_modules/@peter.naydenov/visual-controller-for-vue3/rollup.config.js

@@ -0,0 +1,42 @@
+import resolve    from '@rollup/plugin-node-resolve'
+import commonjs   from '@rollup/plugin-commonjs'
+import terser from '@rollup/plugin-terser';
+
+
+export default [
+	// browser-friendly UMD build
+	{
+		input: 'src/main.js',
+		output: {
+			name: 'walk',
+			file: 'dist/visual-controller-for-vue3.umd.js',
+			format: 'umd',
+			globals : {
+				"vue": "vue"	,
+				"ask-for-promise": "askForPromise"
+			}
+		},
+		external: ['vue', 'ask-for-promise'],
+		plugins: [
+			resolve(), // so Rollup can find `ms`
+			commonjs() // so Rollup can convert `ms` to an ES module
+			, terser()
+		]
+	},
+
+	// CommonJS (for Node) and ES module (for bundlers) build.
+	// (We could have three entries in the configuration array
+	// instead of two, but it's quicker to generate multiple
+	// builds from a single configuration where possible, using
+	// an array for the `output` option, where we can specify
+	// `file` and `format` for each target)
+	{
+		input: 'src/main.js',
+		external: ['vue', 'ask-for-promise'],
+		output: [
+			{ file: 'dist/visual-controller-for-vue3.cjs'    , format: 'cjs' },
+			{ file: 'dist/visual-controller-for-vue3.esm.mjs', format: 'es' }
+		],
+		plugins: [ terser() ]
+	}
+];

package/test-e2e/node_modules/@peter.naydenov/visual-controller-for-vue3/src/App.vue

@@ -0,0 +1,44 @@
+<script setup>
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import HelloWorld from './components/HelloWorld.vue'
+import { inject, ref } from 'vue'
+
+const { eBus, setupUpdates } = inject ( 'dependencies' );
+let message = ref('Vite + Vue');
+
+eBus.emit ( 'check' )
+
+setupUpdates ({
+      changeMessage:  msg => message.value = msg
+    })
+    
+</script>
+
+<template>
+  <div>
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="/vite.svg" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://vuejs.org/" target="_blank">
+      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+    </a>
+  </div>
+  <HelloWorld :msg="message" />
+</div>
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

package/test-e2e/node_modules/@peter.naydenov/visual-controller-for-vue3/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/test-e2e/node_modules/@peter.naydenov/visual-controller-for-vue3/src/components/HelloWorld.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

package/test-e2e/node_modules/@peter.naydenov/visual-controller-for-vue3/src/main.js

@@ -0,0 +1,101 @@
+"use strict"
+/**
+ *  Visual Controller for Vue 3
+ *  Control multiple vue3 apps with a single controller.
+ */
+
+import askForPromise from 'ask-for-promise'
+import { createApp, createSSRApp } from 'vue'
+
+class VisualController {
+
+    constructor ( dependencies = {} ) {
+              const cache = {}  // collect vue-component update interfaces
+              this.dependencies = { ...dependencies, createApp, createSSRApp }
+              return {
+                          publish : this.publish ( this.dependencies, cache )
+                        , destroy : this.destroy ( cache )
+                        , getApp  : this.getApp  ( cache )
+                        , has     : id => cache[id] ? true : false
+                    }
+        }
+
+
+
+    publish ( dependencies, cache ) {
+        return function (component, data, id) {
+                    const 
+                          hasKey = this.has ( id )
+                        , { createApp, createSSRApp } = dependencies
+                        , { isCustomElement } = data
+                        , endTask = askForPromise ()
+                        ;
+                    if ( !component ) {
+                            console.error ( `Error: Component is undefined` )
+                            endTask.done (false)
+                            return endTask.promise
+                    }
+                    if ( hasKey )   this.destroy ( id )
+
+                    let 
+                          node = document.getElementById ( id )
+                        , app 
+                        , setupUpdates = lib => cache[id] = lib
+                        ;
+                    if ( !node ) {  
+                                console.error ( `Can't find node with id: "${id}"`)
+                                endTask.done ( false )
+                                return endTask.promise
+                        }
+                        
+                    if ( node.innerHTML.trim () === '' ) {   // Empty container -> create new app
+                                app = createApp ( component, data )
+                        }
+                    else {   // Not empty container -> hydrate SSR app
+                                app = createSSRApp ( component, data )
+                        }
+
+                    cache[id] = {}
+                    app.provide ( 'dependencies', {...dependencies, setupUpdates})
+
+                    if ( isCustomElement )   app.config.isCustomElement = isCustomElement   // Autonomous Custom Elements. Docs: https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements
+                    app.mount (`#${id}`)
+                    endTask.done ( cache[id] )
+                    return endTask.promise
+            }} // publish func.
+
+
+
+    destroy ( cache ) {
+        return function (id) {
+                    if ( cache[id] ) {                    
+                            let 
+                                  node = document.getElementById ( id )
+                                , unmount = node.__vue_app__.unmount
+                                ;
+                            unmount ()
+                            node.removeAttribute ( 'data-v-app' )
+                            delete cache[id]
+                            return true
+                        }
+                    else    return false
+            }} // destroy func.
+
+
+            
+    getApp ( cache ) {
+        return function (id) {
+                const item = cache[id];
+                if ( !item ) {  
+                        console.error ( `App with id: "${id}" was not found.`)
+                        return false
+                    }
+                return item
+        }} // getApp func.
+} // visualController
+
+
+
+export default VisualController
+
+

package/test-e2e/node_modules/@peter.naydenov/visual-controller-for-vue3/src/style.css

@@ -0,0 +1,90 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/test-e2e/node_modules/@peter.naydenov/visual-controller-for-vue3/test/01_general.cy.js

@@ -0,0 +1,98 @@
+import VisualController from '../src/main.js'
+import App from '../src/App.vue'
+import { renderToString } from 'vue/server-renderer'
+import { createApp, provide, createSSRApp } from 'vue'
+import notice from '@peter.naydenov/notice'
+import { assert } from '@vue/compiler-core'
+
+
+
+const cid = id =>`[data-cy-${id}]`;
+
+const
+     root = document.querySelector ( cid`root` )
+   , eBus = notice ()
+   , html = new VisualController ({ eBus })
+   ;
+
+root.id = 'el'
+
+
+
+describe ( 'Visual controller for vue 3', () => {
+
+
+
+    it ( 'Method "publish" returns a promise', done => { 
+                const result = html.publish ( App, {}, 'el' );
+                expect (  result.constructor.name ).to.be.equal ( 'Promise' )
+                done ()
+        }) // it Method publish return a promise
+
+    it ( 'Destroy', () => {
+                const node = document.getElementById ( 'el' );
+                html.publish ( App, {}, 'el' );
+                expect ( node.innerHTML ).not.equal ( '' )
+                expect ( node.dataset.vApp ).not.be.equal ( undefined )
+
+                html.destroy ( 'el' )
+                expect ( node.innerHTML ).to.be.equal ( '' )
+                expect ( node.dataset.vApp ).to.be.equal ( undefined )
+        }) // it destroy
+
+    it ( 'Dependencies', done => {
+                let a = 0;
+                eBus.on ( 'check', () => a = 1 )
+                html.publish ( App, {}, 'el' )
+                        .then ( app => {
+                                    expect ( typeof app.changeMessage ).to.be.equal ( 'function' )
+                                    expect ( a ).to.be.equal ( 1 )
+                                    done ()
+                            })
+        }) // it Dependencies
+
+
+
+    it ( 'Method "has"', () => {
+                html.publish ( App, {}, 'el' )
+                const exists = html.has ( 'el' );
+                html.destroy ( 'el' )
+                const missing = html.has ( 'el' );
+                expect ( exists ).to.be.equal ( true )
+                expect ( missing ).to.be.equal ( false )
+        }) // it Has
+
+
+
+    it ( 'Hydrate, SSR support', done => {
+                const 
+                      node = document.getElementById ( 'el' )
+                    , app = createSSRApp ( App )
+                    , setupUpdates = () => {}
+                    ;
+                app.provide ('dependencies', { eBus, setupUpdates })
+                renderToString ( app )
+                      .then ( snippet => {  // Server side render and attach
+                                    node.innerHTML = snippet
+                                    let button = document.querySelector ( 'button' );
+                                    expect ( button.innerHTML ).to.be.equal ( 'count is 0' )
+                                    button.click ()
+                                    expect ( button.innerHTML ).to.be.equal ( 'count is 0' )
+                                    return ''
+                            })
+                        .then ( () => {  // Hydration moment
+                                    let btn = document.querySelector ( 'button' );
+                                    expect ( btn.innerHTML ).to.be.equal ( 'count is 0' )
+                                    html.publish ( App, {}, 'el' )
+                                        .then ( () => {
+                                                        btn = document.querySelector ( 'button' );
+                                                        btn = document.querySelector ( 'button' );
+                                                        btn.click ()
+                                                        setTimeout ( () => { // Waiting for next DOM call and then test
+                                                                expect ( btn.innerHTML ).to.be.equal ( 'count is 1' )
+                                                                done ()
+                                                            }, 0 )
+                                            })
+                            })
+        }) // it Hydrate
+}) // describe