c0ckp1t 1.0.14 → 1.0.16

package/Config.mjs

@@ -23,7 +23,7 @@ import {deepMerge, DEFAULTS} from "CoreUtils";
 // ________________________________________________________________________________
 // Default Nav Tree Builder
 // ________________________________________________________________________________
-function buildNavTree(instanceId) {
+export function buildNavTree(instanceId) {
     return {
         icon: "fa-house",
         depth: 0,
@@ -139,7 +139,7 @@ function buildNavTree(instanceId) {
 // ________________________________________________________________________________
 // Routes Builder
 // ________________________________________________________________________________
-function buildRoutes(instanceId = "default", prefix = "") {
+export function buildRoutes(instanceId = "default", prefix = "") {
     return [
         { path: '/', name: 'root', children: [
                 {path: '', redirect: `/${instanceId}/docs/Introduction.md`},

package/README.md

@@ -2,59 +2,48 @@
 
 This project is a Vue.js 3 zero-build web framework using an Islands architecture. HTTP and WebSocket backends are supported. It can compile .vue SFC files at runtime via **vue3-sfc-loader**, this means no Webpack/Vite build step required. There are many reusable components and bootstrap 5.3 theming.
 
-
 ## References
 
-* npm
+* Homepage
+  * https://www.c0ckp1t.com/
+* NPM
   * https://www.npmjs.com/package/c0ckp1t
-* cdn
+* CDN
   * https://www.jsdelivr.com/package/npm/c0ckp1t
   * https://cdn.jsdelivr.net/npm/c0ckp1t@latest/
+* GITHUB
+  * https://github.com/lfmunoz/c0ckp1t-webroot/
 
-## Overview
-
-The main entry point is `GlobalStore.mjs`. You initialize it with a configuration object, and name of where the C0ckp1t Vue Application should be mounted. 
-
-```js
-import Constants from 'C0ckp1tAppConfig'
-
-import {api as apiMain} from 'GlobalStore'
-apiMain.init("app-default", Constants)
-```
-
-
-## jsfiddle.net example
-
-
-
-## Use Remotely (jsdelivr CDN)
+## Use CDN
 
+* Examples 
+  * [index-cdn.html](https://github.com/c0ckp1t/c0ckp1t-webroot/blob/main/index-cdn.html)
 
 
 ## Use Locally
 
+If you want to use the framework locally, you can download the package from [npm](https://www.npmjs.com/package/c0ckp1t) or do a `git clone` of the repository.
+
+**Note:** Check for latest version here: https://registry.npmjs.org/c0ckp1t/
 
 ```bash
-wget https://registry.npmjs.org/c0ckp1t/-/c0ckp1t-1.0.2.tgz
-tar -zxvf c0ckp1t-1.0.2.tgz 
+wget https://registry.npmjs.org/c0ckp1t/-/c0ckp1t-1.0.16.tgz
+tar -zxvf c0ckp1t-1.0.16.tgz 
 
-# Note expands to  package/ folder i.e:
-tar -zxvf c0ckp1t-1.0.2.tgz 
+# Note expands to package/ folder 
+tar -zxvf c0ckp1t-1.0.16.tgz 
+# i.e: 
 # package/LICENSE
 # package/css/Makefile
 # package/js_ext/Makefile
 # package/css/bootstrap-c0ckp1t.css
 # ...
 
-# to expand to webroot directory
-tar -zxvf c0ckp1t-1.0.2.tgz --strip-components=1 -C webroot
+# To expand to "webroot" directory use this command instead
+tar -zxvf c0ckp1t-1.0.16.tgz --strip-components=1 -C webroot
 ```
 
-
 ## Releases
 
-* 1.0.12 - Beta: fixing cdn index-cdn.html making sure it works with jsfiddle.net
-  * Had to publish many times to get CDN working with different configurations
-* 1.0.2 - Beta: fixing cdn index-cdn.html example
-* 1.0.1 - Beta: removing `Constants.mjs` dependencies
-* 1.0.0 - Beta: initial release 
+* 1.1.0 - Initial Release
+* 1.0.XX - Anything before 1.1.0 is "pre-release" development and testing.

package/components/AceLoader.mjs

@@ -0,0 +1,46 @@
+/**
+ * AceLoader.mjs
+ *
+ * Lazy-loads the Ace editor by dynamically injecting a <script> tag.
+ * Returns a Promise that resolves to window.ace once the script is loaded.
+ * Multiple callers share the same promise (no duplicate script tags).
+ */
+import {store as storeMain, api as apiMain} from 'GlobalStore'
+let _promise = null
+
+const ACE_SCRIPT_LOCAL = '/js_ext/ace-editor/ace.js'
+const ACE_SCRIPT_CDN   = 'https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/ace-editor/ace.js'
+
+/**
+ * @returns {Promise<typeof ace>}
+ */
+export function loadAce() {
+    // Already on the page (e.g. loaded via static <script> during development)
+    if (typeof ace !== 'undefined') return Promise.resolve(ace)
+
+    // Reuse in-flight / resolved promise
+    if (_promise) return _promise
+
+    const componentPrefix = storeMain.appConfig?.componentPrefix || ""
+    const src = `${componentPrefix}${ACE_SCRIPT_LOCAL}`
+
+    _promise = new Promise((resolve, reject) => {
+        const script  = document.createElement('script')
+        script.src    = src
+        script.type   = 'text/javascript'
+        script.onload = () => {
+            if (typeof ace !== 'undefined') {
+                resolve(ace)
+            } else {
+                reject(new Error('[AceLoader] ace global not found after script load'))
+            }
+        }
+        script.onerror = () => {
+            _promise = null // allow retry
+            reject(new Error(`[AceLoader] Failed to load ${src}`))
+        }
+        document.head.appendChild(script)
+    })
+
+    return _promise
+}

package/components/MarkdownUtils.mjs

@@ -68,7 +68,11 @@ export function replaceHrefLinks(inputString, adjustHrefPath = (path) => path) {
       if (match.toLowerCase().includes("http") || match.toLowerCase().includes("class")) {
         return `${match} class="link-primary" target="_blank"`
       }
-      
+     // Check for internal route links (starts with :/)
+     if (param.startsWith(':/')) {
+        const routePath = param.slice(1)  // Remove the leading ':'
+        return `a href="${routePath}" @click.prevent="routeEndpoint('${routePath}')"`
+      }
       // Relative/absolute document links - use Vue handler
       return `a  href="${param}" @click.prevent="href('${param}')"`
 

package/components/vue3-ace-editor.vue

@@ -5,6 +5,7 @@
 */
 
 import {ref, reactive, markRaw, onMounted, onBeforeUnmount, watch} from 'vue';
+import {loadAce} from './AceLoader.mjs';
 
 const root = ref("");
 
@@ -131,9 +132,11 @@ watch(() => local.currentRelativeLineNumbers, (val) => {
   if (_editor) _editor.setOption('relativeLineNumbers', val);
 });
 
-onMounted(() => {
-  if (typeof ace === 'undefined') {
-    console.error('Ace editor not loaded')
+onMounted(async () => {
+  try {
+    await loadAce()
+  } catch (err) {
+    console.error('Ace editor failed to load:', err)
     return
   }
   ace.config.set('basePath', '/js_ext/ace-editor');

package/components/xcode.vue

@@ -1,4 +1,12 @@
 <script setup>
+/*
+  This component is used to display code snippets with syntax highlighting.
+  It fetches the code from a specified URL and can display either the full code or a specific line range.
+  It also includes a button to copy the code to the clipboard.
+
+  <x-code url="" lang="html" />
+
+*/
 import {computed, defineProps, reactive, onMounted} from 'vue'
 
 import {store as storeMain, api as apiMain } from 'GlobalStore'

package/components/xinput.vue

@@ -69,7 +69,7 @@ const typeCheck = computed (() => {
   <input :type="type" aria-label="message" class="form-control"
          :style="props.inputStyle" v-model="message" v-else>
 
-  <div class="input-group-text text-dark icon-container" @click="isPasswordVisible = !isPasswordVisible" v-if="type.toUpperCase() === 'PASSWORD'">
+  <div class="input-group-text text-primary icon-container" @click="isPasswordVisible = !isPasswordVisible" v-if="type.toUpperCase() === 'PASSWORD'">
     <i class="fa-solid fa-eye" v-if="isPasswordVisible"></i>
     <i class="fa-solid fa-eye-slash" v-if="!isPasswordVisible"></i>
   </div>

package/components/xmarkdown.vue

@@ -13,7 +13,7 @@
 // IMPORT
 // ______________________________________________________________________________________
 import {reactive, ref, markRaw, onMounted,  watch, computed, onErrorCaptured, defineAsyncComponent} from 'vue'
-// import {store, methods} from 'GlobalStore'
+import {store as storeMain, api as apiMain} from 'GlobalStore'
 import {getLogger} from "Logging"
 import {md} from "./Markdown.mjs"
 
@@ -158,6 +158,9 @@ function renderMarkdown(html) {
       }
     },
     methods: {
+      async routeEndpoint(endpoint) {
+        await apiMain.routeByEndpoint(endpoint)
+      },
       href(path) {
         emit('href', path)
       },

package/components/xterminal.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {ref, reactive, markRaw, onMounted, onBeforeUnmount, watch, nextTick} from 'vue';
+import {loadAce} from './AceLoader.mjs';
 
 const root = ref(null);
 const inputRef = ref(null);
@@ -245,10 +246,12 @@ function focusInput(options = {}) {
 // LIFECYCLE
 // ________________________________________________________________________________
 
-onMounted(() => {
-  if (typeof ace === 'undefined') {
-    console.error('Ace editor not loaded');
-    return;
+onMounted(async () => {
+  try {
+    await loadAce()
+  } catch (err) {
+    console.error('Ace editor failed to load:', err)
+    return
   }
   
   ace.config.set('basePath', '/js_ext/ace-editor');

package/components/xupload.vue

@@ -1,5 +1,16 @@
 <script setup>
-import {ref, reactive, computed, onMounted, onUnmounted} from 'vue'
+/*
+  xupload.vue
+
+  Usage:
+    <x-upload type="text" :callback="handleSelectedFile"/>
+  Emits:
+    callback(files)
+  Props:
+    type: "IMAGE", "AUDIO", "VIDEO"
+    progress: Number (0-100)
+*/
+import {ref, reactive, computed, watch, onMounted, onUnmounted} from 'vue'
 
 const props = defineProps({
   progress: {
@@ -19,7 +30,6 @@ const props = defineProps({
 const local = reactive({
   isLoading: false,
   src: null,
-  updatedMs: null,
   file: null
 })
 
@@ -28,50 +38,64 @@ const files = ref();
 
 const emit = defineEmits(['callback'])
 
-async function handleChange() {
-  files.value = fileInput.value.files;
-}
+const typeObj = computed(() => {
+  const type = props.type.trim().toUpperCase()
+  switch (type) {
+    case 'IMAGE':
+    case 'AUDIO':
+    case 'VIDEO':
+      return { type, allowUpload: true, accept: `${type.toLowerCase()}/*` }
+    case 'TEXT':
+      return { type, allowUpload: true, accept: '.txt,.csv,.json,.xml,.log,.md,.yml,.yaml,.ini,.cfg,.conf,text/*' }
+    case 'ANY':
+      return { type, allowUpload: true, accept: '*/*' }
+    default:
+      return { type, allowUpload: false, accept: '*/*' }
+  }
+})
 
-async function uploadSelectedFiles() {
-  emit("callback", files.value)
-}
+watch(() => props.type, () => {
+  local.src = null
+  local.file = files.value = null
+  if (fileInput.value) fileInput.value.value = ''
+})
 
 
-const typeObj = computed(() => {
-  // if you change type src must be reset to null
-  local.src = null
-  if(props.type === 'IMAGE') {
-    return {
-      allowUpload: true,
-      accept: `${props.type.toLowerCase()}/*`,
-    }
-  } else if(props.type === 'IMAGE') {
-    return {
-      allowUpload: true,
-      accept: `${props.type.toLowerCase()}/*`,
-    }
-  } else if(props.type === 'VIDEO') {
-    return {
-      allowUpload: true,
-      accept: `${props.type.toLowerCase()}/*`,
-    }
-  } else {
-    return {
-      allowUpload: false,
-      accept: `${props.type.toLowerCase()}/*`,
-    }
+function handleFileChange(event) {
+  const selectedFiles = event.target.files
+  if (!selectedFiles || selectedFiles.length === 0) {
+    files.value = null
+    local.src = null
+    local.file = null
+    return
   }
-})
 
-function handleImagePreview(event) {
-  local.file = event.target.files[0];
-  if (!local.file) return;
-  const reader = new FileReader();
+  files.value = selectedFiles
+  local.file = selectedFiles[0]
+
+  const reader = new FileReader()
   reader.onload = (e) => {
-    local.src = e.target.result;
-    local.updatedMs = Date.now();
-  };
-  reader.readAsDataURL(local.file);
+    local.src = e.target.result
+  }
+
+  const type = typeObj.value.type
+  if (type === 'TEXT' || type === 'JSON') {
+    reader.readAsText(local.file)
+  } else {
+    reader.readAsDataURL(local.file)
+  }
+}
+function clearFile() {
+  files.value = null
+  local.src = null
+  local.file = null
+  if (fileInput.value) fileInput.value.value = ''
+}
+
+function uploadSelectedFiles() {
+  // Note: getting absolute filepath is not possible in browser for security reasons
+  //  so we return the file object and content
+  emit('callback', { file: local.file, content: local.src })
 }
 
 </script>
@@ -80,37 +104,38 @@ function handleImagePreview(event) {
 <template>
   <div class="x-component x-upload">
 
-    <div class="row">
+    <div class="row align-items-center">
       <div class="col">
-        <input ref="fileInput" @change="handleImagePreview" class="form-control" type="file" :accept="typeObj.accept" multiple>
+        <input ref="fileInput" @change="handleFileChange" class="form-control" type="file" :accept="typeObj.accept" multiple>
       </div>
       <div class="col-auto">
-        <button @click="uploadSelectedFiles" :disabled="!files || files.length === 0">Upload</button>
+        <button class="btn btn-sm btn-primary" @click="clearFile" >
+          Clear
+        </button>
       </div>
     </div>
 
+    <div v-if="files" class="progress mt-2" role="progressbar" aria-label="Success example" :aria-valuenow="props.progress" aria-valuemin="0" aria-valuemax="100">
+      <div class="progress-bar bg-success" :style="`width: ${Math.max(props.progress, 1)}%`">{{(props.progress >= 100) ? 'DONE' : props.progress}}</div>
+    </div>
 
-    <div v-if="props.type === 'IMAGE'" class="image-preview mt-2">
+    <div class="mt-1">
+      <button class="btn btn-sm btn-primary w-100" @click="uploadSelectedFiles" :disabled="!files || files.length === 0">
+        Upload {{props.type}}
+      </button>
+    </div>
+
+    <div v-if="typeObj.type === 'IMAGE' && local.src" class="image-preview mt-2">
       <img :src="local.src"  class="img-thumbnail"/>
     </div>
-    <div v-if="props.type === 'AUDIO'" class="mt-2">
+    <div v-if="typeObj.type === 'AUDIO' && local.src" class="mt-2">
       <audio :src="local.src" controls class="w-100"></audio>
     </div>
-    <div v-if="props.type === 'VIDEO'" class="mt-2">
+    <div v-if="typeObj.type === 'VIDEO' && local.src" class="mt-2" >
       <video :src="local.src" controls class="w-100"></video>
     </div>
-
-
-
-    <div v-if="files" class="progress mt-2" role="progressbar" aria-label="Success example" :aria-valuenow="props.progress" aria-valuemin="0" aria-valuemax="100">
-      <div class="progress-bar bg-success" :style="`width: ${Math.max(props.progress, 1)}%`">{{(props.progress >= 100) ? 'DONE' : props.progress}}</div>
-    </div>
-
-    <div v-if="local.src" class="image-preview mt-2">
-      <img :src="local.src" alt="Preview" class="img-thumbnail"/>
-    </div>
-    <div v-if="local.src" class="image-preview mt-2">
-      <audio :src="local.src" controls class="w-100"></audio>
+    <div v-if="typeObj.type === 'TEXT' && local.src" class="mt-2" >
+      <textarea type="text" class="form-control" :value="local.src" rows="15" readonly></textarea>
     </div>
 
 
@@ -119,11 +144,9 @@ function handleImagePreview(event) {
 
 <style scoped>
 /* xupload.vue */
-
 .x-upload {
   border: 1px solid black;
   padding: 10px;
 }
 
-
 </style>

package/core/CoreUtils.mjs

@@ -43,14 +43,20 @@ export function validateIslandConfig(config) {
 // ________________________________________________________________________________
 export const DEFAULTS = {
     isDev: true,
-    // 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
+    /**
+     * 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/withCredential/
+     *
+     * `true` tells the browser “this cross-origin request should include credentials”,
+     *  meaning: - send cookies (and HTTP auth) *with* the request, and
+     *  allow the browser to store cookies from the response, *if* the server also opts in.
+     */
     WITH_CREDENTIALS: false,
 
     defaultInstanceId: "default",
     instanceId: "default",
-    type: "LOCAL",
+    type: "IslandDefault",
     // Determines GlobalStore.name
     appName: "C0ckp1t Application",
     // Used for default routes prefix (used only in config)
@@ -61,16 +67,24 @@ export const DEFAULTS = {
     appMainComponent: "/core/PageMain.vue",
     // Used for requestion app components and files (GlobalStore.appEndpoint)
     appEndpoint: "",
-
     // Nav Configuration
     navCloseLogo: "/core/img/logo_v1.svg",
     navOpenLogo: "/core/img/logo_v2.svg",
     navHasSearch: false,
     navHasThemeSel: true,
-
+    // Footer Configuration
+    showFooter: true,
+    // NavBar Configuration
+    showTopNavBar: true,
+    // Documentation Configuration
+    showDocReload: true,
+    showDocTrail: false,
+    allowDocWrite: true,
+    allowDocReload: true,
+    // Components Configuration
+    componentsDefaultExpand: true,
     // Determine if VueRouter is createWebHashHistory or createWebHistory
     vueRouterModeIsHash: true,
-
     // Logger Config (see Logging.mjs)
     defaultLogLevel: "INFO",
     defaultLoggerLevels: {
@@ -81,8 +95,7 @@ export const DEFAULTS = {
         "anonymous": "INFO",
         "demo": "INFO"
     },
-
-
+    // Theming
     bootswatchURL: "https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist",
 };
 

package/core/GlobalStore.mjs

@@ -12,7 +12,6 @@ import {validateIslandConfig, findHostnamePortProtocol, validateAppConfig} from
 import {substrAfterFirstSlash, extractLastPath} from "JsUtils";
 
 import IslandDefault from 'IslandDefault'
-import Island from 'Island'
 
 // ________________________________________________________________________________
 // LOGGING
@@ -45,10 +44,22 @@ export const store = reactive({
     // Text appears next to logo in pages/navigation.vue
     name: "C0ckp1t",
     id: LOG_HEADER,
-    config: null,
     appEndpoint: "",
     serverInfo: findHostnamePortProtocol(),
 
+    // ________________________________________________________________________________
+    // Configuration
+    // ________________________________________________________________________________
+    config: null,
+    // Documentation Configuration
+    showDocReload: true,
+    showDocTrail: true,
+    allowDocWrite: true,
+    // FOOTER Configuration
+    showFooter: true,
+    // TOP NAVBAR Configuration
+    showTopNavBar: true,
+
     // ________________________________________________________________________________
     // Registries
     // ________________________________________________________________________________
@@ -56,6 +67,10 @@ export const store = reactive({
     defaultInstanceId: "default",
     selectedInstId: null,
     router: null,
+    registryType: [
+        {k: 'Remote Island', v: 'Island'},
+        {k: 'Default Island', v: 'IslandDefault'}
+    ],
 
     // ________________________________________________________________________________
     // Login
@@ -63,16 +78,6 @@ export const store = reactive({
     isAuthenticated: false,
     username: null,
 
-    // ________________________________________________________________________________
-    // TOP NAVBAR
-    // ________________________________________________________________________________
-    showTopNavBar: true,
-
-    // ________________________________________________________________________________
-    // documentation
-    // ________________________________________________________________________________
-    showDocReload: true,
-    showDocPath: true,
 
     // ________________________________________________________________________________
     // Vue App Instance - gets created in App.vue
@@ -143,12 +148,23 @@ export const api = {
             ...config,
             SERVER_API_URL: store.serverInfo.serverUrl,
         }
+
         let island= null
-        if(decoratedIslandConfig.type === "LOCAL") {
-            island = new IslandDefault(api, decoratedIslandConfig)
-            await api.insertRoutes(`/${island.instanceId}`, config.routes)
-        } else {
-            island = new Island(api, decoratedIslandConfig)
+        switch (decoratedIslandConfig.type) {
+            case "LOCAL":
+            case "DEFAULT":
+            case "default":
+            case "IslandDefault":
+                island = new IslandDefault(api, decoratedIslandConfig)
+                await api.insertRoutes(`/${island.instanceId}`, config.routes)
+                break
+            default:
+                try {
+                    const { default: Island } = await import(decoratedIslandConfig.type)
+                    island = new Island(api, decoratedIslandConfig)
+                } catch(e) {
+                    throw new Error(`Unknown island type: ${decoratedIslandConfig.type}`)
+                }
         }
         store.r[island.instanceId] = island
         await island.init()
@@ -220,7 +236,7 @@ export const api = {
 
     routeByEndpoint: async (endpoint) => {
         const path = endpoint.split("/")
-        logger.info(`[routeByEndpoint] - endpoint=${endpoint}, path=${path}`)
+        logger.debug(`[routeByEndpoint] - endpoint=${endpoint}, path=${path}`)
         try {
             if(path.length > 3) {
                 extractLastPath(endpoint)
@@ -306,6 +322,9 @@ export const api = {
         app.config.errorHandler = (err, vm, info) => {
             console.error('Global error handler:', err, vm, info);
         };
+        app.config.warnHandler = (err, vm, info) => {
+            console.warn('Global warn handler:', err, vm, info);
+        };
 
         //________________________________________________________________________________
         // Create Default Island
@@ -317,8 +336,13 @@ export const api = {
         store.appEndpoint = config.appEndpoint ?? ""
         store.defaultInstanceId = config.instanceId ?? "default"
         store.name = config.appName ?? "C0ckp1t"
+        store.showTopNavBar = config.showTopNavBar ?? true
+        store.showFooter = config.showFooter ?? true
+        store.showDocReload  = config.showDocReload ?? true
+        store.showDocTrail = config.showDocTrail ?? true
+        store.allowDocWrite = config.allowDocWrite ?? false
+        store.allowDocReload = config.allowDocReload ?? false
         store.config = config
-        const vueRouterModeIsHash = config.vueRouterModeIsHash ?? true
 
         // Load default island
         const decoratedIslandConfig = {
@@ -330,6 +354,7 @@ export const api = {
         await islandDefault.init()
 
         // Create Vue Router
+        const vueRouterModeIsHash = config.vueRouterModeIsHash ?? true
         const router = VueRouter.createRouter({
             history: vueRouterModeIsHash ? VueRouter.createWebHashHistory() : VueRouter.createWebHistory(),
             routes: transformRoutes(api.loadModule, config.routes)