⁜ MVC Framework

 ▴ PAC Framework With MVC Framework Subpatterns
    ▵ Manage Simplex/Complex Browser Applications & Websites With Familiar Plain JS Notation
    ▵ Mediate Model, View, Router, And Controller Events With Event-Driven Core Architecture
    ▵ Capture Detailed Object/Array Mutator Method Events Including Subproperty Events

 ⁘ Uses Core-Plex - Event Listener Management System
 ❂ Uses Objecture - Object Watcher, Property Manager

※ Independent Classes

| SYM | NAME | DESCRIPT | API | GUIDE | | -----: | :--- | :------- | :--: | :--: | | M | Model | Manage schematized content. | ▶ | ▶ | | X | Model Schema | Manage data schema. | ▶ | ▶ | | D | Model Content | Manage data content. | ▶ | ▶ | | V | View | Manage templated markup elements. | ▶ | ▶ | | R | Router | Window location router or fetch router. | ▶ | ▶ | | RL | Router (Location) | Manage window location. | ▶ | ▶ | | RF | Router (Fetch) | Manage AJAX connection. | ▶ | ▶ | | RS | Router (Socket) | Manage Socket connection. | ▶ | ▶ | | C | Control | Manage Model, View, Control, Location/fetch Routers. | ▶ | ▶ |

※ Interdependent Class Structures

| FORMULA | NAME | ACRONYM | DESCRIPT | | ------: | :--- | :------ | :------- | |CMVRC* | Control (Model, View, Router, Controls) | CMVRC | Control class instances contain model, view, router, and subcontrol class instances. | |MVRM* | Model (View, Router, Models) | MVRM | Model class instances contain view, router, and submodel class instances. | |VMRV* | View (Model, Router, Views) | VMRV | View class instances contain model, router, and subview class instances. | |RMVR* | Router (Model, View, Routers) | RMVR | Router class instances contain model, view, and subrouter class instances. |

※ Illustrations

PAC (CMVRC)

const control = new Control({
  models: {
    ui: new Model({
      selected: false,
      anchor: { text: "Product Detail" },
    }),
    content: new Model({
      id: "0246813579",
      name: "Some Product Name",
      price: "$235.78",
      descript: "Some product description.",
      graphic: "https://pbs.twimg.com/media/Grhfq0JaIAAPIqI?format=jpg&name=medium",
      anchor: "https://x.com/StellarManatee/status/1925394081796223237",
    }),
  },
  views: {
    default: new View({
      templates: { default: ($models) => {
        const { ui, content } + $models
        return `
          <product data-selected="${ui.selected}">
            <text>
              <name>${content.name}</name>
              <descript>${content.descript}</descript>
              <price>${content.price}</price>
              <a href="${content.anchor}" target="_blank">${ui.anchor.text}</a>
            </text>
            <graphic>
              <img src="${content.graphic}" />
            </graphic>
          </product>
        `
      } },
      querySelectors: { querySelector: {
        'product': ':scope'
      } },
    })
  },
}, {
  events: {
    'models.ui setProperty:selected': function($event) {
      this.views.qs.product.setAttribute($event)
    }
  },
})