c0ckp1t 1.0.12 → 1.0.13

package/c0ckp1t-demo/{C0ckp1tConfig.mjs → Config.mjs}

@@ -10,6 +10,8 @@ const instanceId =  "demo";
 // Used for requestion app components and files
 const appEndpoint = "";
 
+const islandDir = "c0ckp1t-demo"
+
 // ________________________________________________________________________________
 // GLOBAL CONSTANTS
 // ________________________________________________________________________________
@@ -21,6 +23,7 @@ export default {
     type: "LOCAL",
     appName:  "C0ckp1t Demo",
     appEndpoint: appEndpoint,
+    islandDir: islandDir,
 
     // This creates the navigation tree
     root: {
@@ -55,11 +58,11 @@ export default {
 
     // This is used to create routes for the vue router
     routes: [
-        {path: instanceId, location: `${appEndpoint}/c0ckp1t-demo/main.vue`, children: [
+        {path: instanceId, location: `${appEndpoint}/${islandDir}/main.vue`, children: [
                 {path: '', redirect: `/${instanceId}/homepage`},
-                {path: 'homepage', location: `${appEndpoint}/c0ckp1t-demo/pages/homepage.vue`},
+                {path: 'homepage', location: `${appEndpoint}/${islandDir}/pages/homepage.vue`},
                 {path: 'docs', redirect: `/${instanceId}/docs/Introduction.md`},
-                {path: 'docs/:pathMatch(.*)*', location: `${appEndpoint}/core/pages/Documentation.vue`},
+                {path: 'docs/:pathMatch(.*)*', location: `${appEndpoint}/${islandDir}/pages/documentation.vue`},
             ] },
     ]
 

package/c0ckp1t-demo/components/sidebar.vue

@@ -39,8 +39,7 @@ logger.debug("[INIT]")
 
       <ul class="nav flex-column mb-auto">
         <RouterLink class="nav-link d-flex align-items-center gap-2" :to="`${routerEndpoint}/homepage`">Homepage</RouterLink>
-        <RouterLink class="nav-link d-flex align-items-center gap-2" :class="{ 'router-link-active': isDocsActive }" :to="`${routerEndpoint}/docs`" v-if="registry?.store?.context?.accessLevel <= 500">Documentation</RouterLink>
-        <RouterLink class="nav-link d-flex align-items-center gap-2" :to="`${routerEndpoint}/admin`" v-if="registry?.store?.context?.accessLevel <= 500">Admin</RouterLink>
+        <RouterLink class="nav-link d-flex align-items-center gap-2" :class="{ 'router-link-active': isDocsActive }" :to="`${routerEndpoint}/docs`" >Documentation</RouterLink>
       </ul>
 
       <hr class="my-2"> 

package/c0ckp1t-demo/docs/Introduction.md

@@ -1,3 +1,4 @@
 
 # C0ckp1t Demo Application
 
+* [Issues](./Issues.md)

package/c0ckp1t-demo/docs/Issues.md

@@ -0,0 +1,3 @@
+
+# Issues
+

package/c0ckp1t-demo/pages/documentation.vue

@@ -0,0 +1,64 @@
+<script setup>
+/*
+  [VARS] - init, imports, template, script, style, name
+
+  Usage:
+    const documentation = defineAsyncComponent(() => import("/v3/actions/auth/www/pages/documentation.vue"))
+    <documentation/>
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {reactive, computed, ref, onMounted, onUnmounted, defineAsyncComponent, watch} from 'vue'
+import {getLogger} from "Logging";
+import {store as storeLocal, api as apiLocal, registry, instanceId} from '../store.mjs'
+import Documentation from "/core/pages/Documentation.vue"
+
+// !# C0CKP1T_START imports
+
+// !# C0CKP1T_END imports
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = "pages/homepage.vue"
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+// !# C0CKP1T_START script
+const local = reactive({
+    id: LOG_HEADER,
+    instanceId: instanceId
+})
+// !# C0CKP1T_END script
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+    if (registry.state.isReady) {
+// !# C0CKP1T_START init
+
+// !# C0CKP1T_END init
+    } else {
+        setTimeout(async () => { await init() }, 1000)
+    }
+}
+onMounted(async () => { init() })
+</script>
+
+<template>
+<!--  !# C0CKP1T_START template -->
+<x-section extra="fs-3" k="Documentation" :visible="true">
+    <Documentation :remotePathMapping="`/${storeLocal.islandDir}/docs`"></Documentation>
+</x-section>
+<!--  !# C0CKP1T_END template -->
+</template>
+
+<style scoped>
+/* !# C0CKP1T_START style */
+
+/* !# C0CKP1T_END style */
+</style>
+
+

package/c0ckp1t-demo/store.mjs

@@ -12,7 +12,7 @@ import {getLogger} from "Logging";
 import {store as storeMain, api as apiMain} from 'GlobalStore'
 
 // !# C0CKP1T_START import
-import C0ckp1tConfig from "./C0ckp1tConfig.mjs";
+import C0ckp1tConfig from "./Config.mjs";
 // !# C0CKP1T_END import
 
 export const instanceId = C0ckp1tConfig.instanceId
@@ -38,7 +38,7 @@ export const store = reactive({
   endpoint: routerEndpoint,
 
 // !# C0CKP1T_START store
-
+  islandDir: C0ckp1tConfig.islandDir,
 // !# C0CKP1T_END store
 })
 

package/components/xsound.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { reactive, computed, markRaw, onMounted, onBeforeUnmount } from 'vue'
-import XDropdown2 from '/components/xdropdown2.vue'
 
 // https://wavesurfer-js.org/docs/
 // NOTE: streaming not supported?
@@ -197,7 +196,7 @@ onBeforeUnmount(() => {
             </div>
             
             <!-- Playback Rate -->
-            <XDropdown2
+            <x-dropdown2
                 v-model="local.playbackRate"
                 :items="playbackRateOptions"
                 :on-change="onPlaybackRateChange"

package/core/PageMain.vue

@@ -31,8 +31,8 @@ const local = reactive({
   toggle: false,
   items: [ ],
 
-  navCloseLogo: storeMain.config?.navCloseLogo ?? "/img/logo_v1.svg",
-  navOpenLogo: storeMain.config?.navOpenLogo ?? "/img/logo_v2.svg",
+  navCloseLogo: storeMain.config?.navCloseLogo ?? "./img/logo_v1.svg",
+  navOpenLogo: storeMain.config?.navOpenLogo ?? "./img/logo_v2.svg",
   navHasSearch: storeMain.config?.navHasSearch ?? true,
   navHasThemeSel: storeMain.config?.navHasThemeSel ?? true,
 })

package/core/VueUtils.mjs

@@ -38,11 +38,18 @@ logger.debug("INIT")
 logger.info(`vue3-sfc-loader vue version ${vueVersion}`)
 logger.info(`vue.js version ${Vue.version}`)
 
-
+function validateVueSFC(text) {
+    if(text.startsWith("<!DOCTYPE html")) {
+       throw Error(`[validateVueSFC] - Invalid SFC content: starts with !DOCTYPE html - likely an error page or non-SFC content`)
+    }
+   // if(!text.includes("<template>") || !text.includes("<script>")) { }
+}
 //________________________________________________________________________________
 // LOCAL APP SFC LOADER OPTIONS
 //________________________________________________________________________________
+// Configuration passed to vue3-sfc-loader's loadModule
 const options =  {
+    devMode: false,
     // separate, custom cache of raw source text
     sourceCode: {},
     // ADD THIS:
@@ -68,37 +75,37 @@ const options =  {
         GlobalStore: GlobalStore,
     },
 
-    async getFile(path, type) {
-        if(!type) {
-            type = path.substring(path.lastIndexOf('.'));
-        }
+    // Step 1. Fetch the file content
+    async getFile(path) {
 
         const instanceId = JsUtils.substrAfterFirstSlash(path)
 
         let res = null
         if(sourceCode[path]) {
-            logger.debug(`[getFile] - cached - ${path} - type=${type}`)
+            logger.debug(`[getFile] - cached - ${path}`)
             const cached = sourceCode[path];
             res = new Response(cached.code, {status: 200, statusText: 'OK'});
         } else if (path.startsWith("http") || path.startsWith("HTTP")) {
-            logger.debug(`[getFile] - default - ${path} - ${type}`)
-            res = await GlobalStore.store.r["default"].resolver(path, type)
+            logger.debug(`[getFile] - http - ${path}`)
+            res = await GlobalStore.store.r["default"].resolver(path)
         } else if (GlobalStore.store.r[instanceId]) {
-            logger.debug(`[getFile] - instance - ${path} - ${type}`)
+            logger.debug(`[getFile] - instance - ${path}`)
             const pathAfterInstanceId = path.replace("/" + instanceId, "")
-            res = await GlobalStore.store.r[instanceId].resolver(pathAfterInstanceId, type)
+            res = await GlobalStore.store.r[instanceId].resolver(pathAfterInstanceId)
         } else {
-            logger.debug(`[getFile] - default - ${path} - ${type}`)
-            res = await GlobalStore.store.r["default"].resolver(path, type)
+            logger.debug(`[getFile] - default - ${path}`)
+            res = await GlobalStore.store.r["default"].resolver(path)
         }
 
         return {
-            // type: type,
             getContentData: asBinary => {
                 if (asBinary) {
                     return res.arrayBuffer();
                 } else {
                     return res.text().then(text => {
+                        if(path.endsWith(".vue")) {
+                            validateVueSFC(text)
+                        }
                         cacheSourceCode(path, text);
                         return text;
                     });
@@ -114,7 +121,10 @@ const options =  {
         document.head.insertBefore(style, ref);
     },
 
+    // Step 2. Handle the module request
+    //  built-in handling for .vue, .js, .mjs, .css (return undefined)
     handleModule: async function (type, getContentData, path, options) {
+        // type=.vue  - path=/core/PageMain.vue
         logger.debug(`[handleModule] - type=${type}  - path=${path}`)
 
         // Handle esm.sh external modules (used by code-mirror.vue)

package/core/pages/frontend/ComponentsBasic.vue

@@ -215,6 +215,10 @@ onMounted(async () => {
       <x-dropdown k="Route Type: " :items="local.myDropDownItems" v-model="local.myDropDown"></x-dropdown>
     </ComponentView>
 
+    <ComponentView name="x-dropdown2" url="/components/xdropdown2.vue">
+      <x-dropdown2 k="Route Type: " :items="local.myDropDownItems" v-model="local.myDropDown"></x-dropdown2>
+    </ComponentView>
+
     <ComponentView name="x-json" url="/components/xjson.vue">
       <x-json :obj="local.myTableData"></x-json>
       <div class="mt-2">

package/index-cdn.html

@@ -47,9 +47,9 @@
 </head>
 
 <body class="main-body">
-  <div id="app-default">
-    <app-main></app-main>
-  </div>
+<div id="app-default">
+  <app-main></app-main>
+</div>
 </body>
 
 <!-- =================== SCRIPTS ===================  -->
@@ -57,12 +57,22 @@
 <script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/loglevel-plugin-prefix.min.js"></script>
 
 <script type="module">
-import {init as initLogger} from 'Logging';
-import {api as apiMain} from 'GlobalStore'
-import DefaultConfig from 'https://cdn.jsdelivr.net/npm/c0ckp1t@latest/CdnConfig.mjs'
+  import {init as initLogger} from 'Logging';
+  import {api as apiMain} from 'GlobalStore'
+  import { createConfig } from 'https://cdn.jsdelivr.net/npm/c0ckp1t@latest/Config.mjs'
 
-initLogger(DefaultConfig)
-await apiMain.init("app-default", DefaultConfig)
+  const config = createConfig({
+    appEndpoint: "https://cdn.jsdelivr.net/npm/c0ckp1t@latest",
+    routePrefix: "https://cdn.jsdelivr.net/npm/c0ckp1t@latest",
+    componentPrefix: "https://cdn.jsdelivr.net/npm/c0ckp1t@latest",
+    appMainComponent: "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/core/PageMain.vue",
+    defaultLoggerLevels: {
+      "VueUtils.mjs": "INFO"
+    }
+  })
+  initLogger(config)
+  console.log(config)
+  await apiMain.init("app-default", config)
 
 </script>
 

package/index.html

@@ -63,7 +63,7 @@ import { createConfig } from './Config.mjs';
 // Islands
 import ConfigAdmin from './ConfigAdmin.mjs'
 import ConfigAnonymous from './ConfigAnonymous.mjs'
-import ConfigDemo from './c0ckp1t-demo/C0ckp1tConfig.mjs'
+import ConfigDemo from './c0ckp1t-demo/Config.mjs'
 // Create Application
 const config = createConfig();
 initLogger(config)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "c0ckp1t",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A Vue 3 zero-build web dashboard framework with Islands architecture, WebSocket backends, and reusable UI components",
   "type": "module",
   "license": "Apache-2.0",
@@ -27,8 +27,6 @@
     "index.html",
     "style.css",
     "Config.mjs",
-    "DefaultConfig.mjs",
-    "CdnConfig.mjs",
     "favicon.ico",
     "favicon-32x32.png",
     "favicon-64x64.png",
@@ -37,8 +35,7 @@
     "components/",
     "js_ext/",
     "css/",
-    "c0ckp1t-demo/",
-    "docs/"
+    "c0ckp1t-demo/"
   ],
   "scripts": {
     "lint": "eslint .",

package/c0ckp1t-demo/CdnConfig.mjs

@@ -1,68 +0,0 @@
-// ________________________________________________________________________________
-// Properties
-// ________________________________________________________________________________
-// XMLHttpRequest from a different domain cannot set cookie values for their own
-// domain unless withCredentials is set to true before making the request.
-// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
-const WITH_CREDENTIALS = false
-// Note: VueUtils requires this to be 'default'
-const instanceId =  "demo";
-// Used for requestion app components and files
-const appEndpoint = "https://cdn.jsdelivr.net/npm/c0ckp1t@latest";
-
-// ________________________________________________________________________________
-// GLOBAL CONSTANTS
-// ________________________________________________________________________________
-export default {
-    isDev: true,
-    WITH_CREDENTIALS: WITH_CREDENTIALS,
-
-    instanceId: instanceId,
-    type: "LOCAL",
-    appName:  "C0ckp1t Demo",
-    appEndpoint: appEndpoint,
-
-    // This creates the navigation tree
-    root: {
-        icon: "fa-house",
-        depth: 0,
-        endpoint: "/",
-        isLeaf: false,
-        isRoot: true,
-        name: "",
-        path: [],
-        children: [
-            {
-                depth: 1,
-                endpoint: `/${instanceId}/homepage`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["homepage"],
-                name: "homepage",
-                children: []
-            },
-            {
-                depth: 1,
-                endpoint: `/${instanceId}/docs`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["docs"],
-                name: "docs",
-                children: []
-            }
-        ]
-    },
-
-    // This is used to create routes for the vue router
-    routes: [
-        {path: instanceId, location: `${appEndpoint}/c0ckp1t-demo/main.vue`, children: [
-                {path: '', redirect: `/${instanceId}/homepage`},
-                {path: 'homepage', location: `${appEndpoint}/c0ckp1t-demo/pages/homepage.vue`},
-                {path: 'docs', redirect: `/${instanceId}/docs/Introduction.md`},
-                {path: 'docs/:pathMatch(.*)*', location: `${appEndpoint}/core/pages/Documentation.vue`},
-            ] },
-    ]
-
-
-} // end of Constants
-

package/docs/Introduction.md

@@ -1,3 +0,0 @@
-
-# C0ckp1t Webroot Documentation
-

package/docs/Issues.md

@@ -1,13 +0,0 @@
-
-
-if cannot read PageMain
-
-because it returns gargabe I.e
-
-```json
-<!doctype html>
-<html lang="en">
-    <head>
-```
-
-the app does throw error and doesn't work. Need better error checking