js-mvc-framework - npm Package Compare versions

Comparing version 1.3.14 to 1.3.15

demonstrament/application.config.js

@@ -239,4 +239,61 @@ import { readFile } from 'node:fs/promises'
       }
+    },
+    {
+      name: 'Test | View',
+      url: '/test/view',
+      source: 'documents/test/view',
+      target: 'localhost/test/view',
+      main: 'index.html',
+      ignore: [],
+      clear: {
+        target: [
+          '/**/*.{html,css,js,md}',
+        ],
+        source: [
+          '**/template.js',
+          '!**/$template.js'
+        ],
+      },
+      documents: {
+        simules: [],
+        styles: [{
+          type: 'style',
+          input: 'index.scss',
+          output: 'index.css',
+          watch: [
+            '**/*.scss', ,
+            '../classes/**',
+            '../coutil/**'
+          ],
+        }],
+        scripts: [{
+          type: 'script',
+          input: 'index.js',
+          output: 'index.js',
+          watch: [
+            '**/*.js',
+            '../classes/**',
+            '../coutil/**'
+          ],
+          external: ['/dependencies/mvc-framework.js']
+        }],
+        structs: [{
+          type: 'struct',
+          localsName: '$content',
+          outputType: 'server',
+          model: 'index.json',
+          input: 'index.ejs',
+          output: 'index.html',
+          watch: ['**/*.{ejs,json}', '!**/\$*.ejs'],
+        }, {
+          type: 'struct',
+          localsName: '$content',
+          outputType: 'client',
+          input: '**/*.ejs',
+          output: '',
+          watch: ['**/\$*.ejs'],
+        }],
+      }
     }
   ],
 }

demonstrament/documents/test/schema/index.js

@@ -1,2 +0,2 @@
-import { TestResults } from "../classes/index.js"
+import TestResults from "../classes/views/test-results/index.js"
 import Tests from "./tests/index.js"
@@ -7,2 +7,3 @@
   model: Tests,
-}).render()
+})
+testResults.render(testResults.model, 'default')

demonstrament/package.json

@@ -24,3 +24,6 @@ {
     "sass": "^1.79.1"
+  },
+  "dependencies": {
+    "parsel-js": "^1.2.1"
   }
 }

development/Core/Event/index.js

@@ -44,3 +44,6 @@ import Content from '../../Model/Content/index.js'
       : 'removeEventListener'
-    if(this.target instanceof NodeList) {
+    if(
+      this.target instanceof NodeList ||
+      Array.isArray(this.target)
+    ) {
       for(const $target of this.target) {
@@ -47,0 +50,0 @@ $target[eventAbility](this.type, this.#boundListener, this.options)

development/Model/LocalStorage/index.js

@@ -15,28 +15,16 @@ export default class LocalStorage extends EventTarget {
     let dbItem
-    try{
-      return JSON.parse(this.#db.getItem(this.path))
-    }
-    catch($err) {
-      console.log($err)
-      return
-    }
+    try{ return JSON.parse(this.#db.getItem(this.path)) }
+    catch($err) { console.log($err) }
+    return
   }
   set($content) {
-    try {
-      return this.#db.setItem(this.path, JSON.stringify($content))
-    }
-    catch($err) {
-      console.log($err)
-      return
-    }
+    try { return this.#db.setItem(this.path, JSON.stringify($content)) }
+    catch($err) { console.log($err) }
+    return
   }
   remove() {
-    try {
-      return this.#db.removeItem(this.path)
-    }
-    catch($err) {
-      console.log($err)
-      return
-    }
+    try { return this.#db.removeItem(this.path) }
+    catch($err) { console.log($err) }
+    return
   }
 }

development/package.json

@@ -18,4 +18,5 @@ {
   "dependencies": {
+    "parsel-js": "^1.2.1",
     "path-to-regexp": "^8.2.0"
   }
 }

development/View/index.js

@@ -0,10 +1,13 @@
+import * as parsel from '../../node_modules/parsel-js/dist/parsel.js'
 import Core from '../Core/index.js'
 import QuerySelector from './QuerySelector/index.js'
+import Query from './Query/index.js'
 import Settings from './Settings/index.js'
 import Options from './Options/index.js'
 export default class View extends Core {
-  #_parent
-  #_element
-  #_children = []
+  #_templates
+  #_scope
+  #_parentElement
   #_template
+  #_children
   #_querySelectors = {}
@@ -17,33 +20,65 @@ constructor($settings = {}, $options = {}) {
     this.addQuerySelectors(this.settings.querySelectors)
+    const { enableQuerySelectors, enableEvents } = this.settings
+    if(enableQuerySelectors) this.enableQuerySelectors()
+    if(enableEvents) this.enableEvents()
+
   }
-  get parent() { return this.settings.parent }
-  get element() {
-    if(this.#_element !== undefined) { return this.#_element }
-    this.#_element = document.createElement('element')
-    return this.#_element
+  get templates() {
+    if(this.#_templates !== undefined) return this.#_templates
+    this.#_templates = this.settings.templates
+    return this.#_templates
   }
-  set element($documentFragment) {
+  get scope() {
+    if(this.#_scope !== undefined) return this.#_scope
+    this.#_scope = this.settings.scope
+    return this.#_scope
+  }
+  get parentElement() {
+    if(this.#_parentElement !== undefined) return this.#_parentElement
+    this.#_parentElement = this.settings.parentElement
+    return this.#_parentElement
+  }
+  get #template() {
+    if(this.#_template !== undefined) { return this.#_template }
+    this.#_template = document.createElement('template')
+    return this.#_template
+  }
+  set #template($templateString) {
     this.disableEvents()
     this.disableQuerySelectors()
-    this.children = $documentFragment.childNodes
-    this.#_querySelectors = undefined
-    this.element.replaceChildren(...this.children)
+    this.#template.innerHTML = $templateString
+    this.children = this.#template.content.children
+    this.parentElement.append(...this.children.values())
     this.enableQuerySelectors()
     this.enableEvents()
-    this.parent.append(...this.children)
   }
-  get children() { return this.#_children }
+  get children() {
+    if(this.#_children !== undefined) return this.#_children
+    this.#_children = new Map()
+    return this.#_children
+  }
   set children($children) {
-    const children = this.#_children
-    children.forEach(($child) => $child.parent.removeChild($child))
-    children.length = 0
-    children.push(...$children)
+    const children = this.children
+    children.forEach(($child, $childIndex) => $child?.parentElement.removeChild($child))
+    children.clear()
+    Array.from($children).forEach(($child, $childIndex) => {
+      children.set($childIndex, $child)
+    })
   }
-  get template() {
-    if(this.#_template !== undefined) return this.#_template
-    this.#_template = document.createElement('template')
-    return this.#_template
-  }
   get querySelectors() { return this.#_querySelectors }
   get qs() { return this.querySelectors }
+  querySelector($queryString, $queryScope) {
+    const query = this.#query('querySelector', $queryString, $queryScope)
+    return query[0] || null
+  }
+  querySelectorAll($queryString, $queryScope) {
+    const query = this.#query('querySelectorAll', $queryString, $queryScope)
+    return query
+  }
+  #query($queryMethod, $queryString) {
+    const queryElement = (this.scope === 'template')
+      ? { children: Array.from(this.children.values()) }
+      : { children: Array.from(this.parentElement.children) }
+    return Query(queryElement, $queryMethod, $queryString)
+  }
   addQuerySelectors($queryMethods) {
@@ -100,7 +135,6 @@ if($queryMethods === undefined) return this
   }
-  render($model, $template = 'default') {
-    this.template.innerHTML = this.settings.templates[$template]($model)
-    this.element = this.template.content
+  render($model = {}, $template = 'default') {
+    this.#template = this.templates[$template]($model)
     return this
   }
 }

development/View/Options/index.js

 export default {
+  enableEvents: true,
   enableQuerySelectors: true
 }

development/View/QuerySelector/index.js

@@ -20,5 +20,3 @@ export default class QuerySelector {
       Object.defineProperty(context.querySelectors, name, {
-        enumerable: true,
-        configurable: true,
-        get() { return context.parent[method](selector) }
+        get() { return context[method](selector) }
       })
@@ -25,0 +23,0 @@ }

development/View/Settings/index.js

 export default {
+  parentElement: undefined, // HTML Element
+  scope: 'template', // 'parent',
   templates: { default: () => `` },
@@ -3,0 +5,0 @@ querySelectors: {},

package.json

 {
   "name": "js-mvc-framework",
   "author": "Thomas Patrick Welborn",
-  "version": "1.3.14",
+  "version": "1.3.15",
   "type": "module",
@@ -6,0 +6,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1967858

increased by5.68%

Number of package files

247

increased by2.07%

Lines of code

17249

increased by7.42%

No dependency changes