c0ckp1t 1.0.5 → 1.0.10

package/CdnConfig.mjs

@@ -0,0 +1,177 @@
+/**
+ * Default Configuration for a C0ckp1t Application
+ */
+// ________________________________________________________________________________
+// 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 =  "default";
+// 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,
+
+    // logger config
+    defaultLogLevel: "INFO",
+    defaultLoggerLevels: {
+        "GlobalStore.mjs": "INFO",
+        "VueUtils.mjs": "INFO",
+        "Connection.mjs": "INFO",
+        "default": "INFO",
+        "anonymous": "INFO",
+        "demo": "INFO"
+    },
+
+    instanceId: instanceId,
+    type: "LOCAL",
+    appName:  "C0ckp1t App",
+    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}/connections`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["connections"],
+                name: "Connections",
+                children: []
+            },
+            {
+                depth: 1,
+                endpoint: `/${instanceId}/cache`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["cache"],
+                name: "Cache",
+                children: []
+            },
+            {
+                icon: "fa-network-wired",
+                depth: 1,
+                endpoint: `/${instanceId}/traffic`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["traffic"],
+                name: "Traffic",
+                children: []
+            },
+            {
+                icon: "fa-bell",
+                depth: 1,
+                endpoint: `/${instanceId}/notifies`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["notifies"],
+                name: "Notifies",
+                children: []
+            },
+            {
+                icon: "fa-info",
+                depth: 1,
+                endpoint: `/${instanceId}/docs`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["docs"],
+                name: "Documentation",
+                children: []
+            },
+            {
+                icon: "fa-info",
+                depth: 1,
+                endpoint: `/${instanceId}/components`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["components"],
+                name: "Components",
+                children: [
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/bootstrap`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["bootstrap"],
+                        name: "Bootstrap",
+                        children: []
+                    },
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/basic`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["basic"],
+                        name: "Basic",
+                        children: []
+                    },
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/advanced`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["advanced"],
+                        name: "Advanced",
+                        children: []
+                    },
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/theme`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["theme"],
+                        name: "Theme",
+                        children: []
+                    },
+                ]
+            }
+        ]
+    },
+
+    // This is used to create routes for the vue router
+    routes: [
+        { path: '/', name: 'root', children: [
+                {path: '', redirect: '/default/docs/Introduction.md'},
+                {path: `${instanceId}`, children :[
+                        {path: 'docs', redirect: `/${instanceId}/docs/Introduction.md`},
+                        {path: 'docs/:pathMatch(.*)*', location: `${appEndpoint}/core/pages/Documentation.vue`},
+                        {path: 'connections', location: `${appEndpoint}/core/pages/Connections.vue`},
+                        {path: 'connections/:id', location: `${appEndpoint}/core/pages/Connection.vue`},
+                        {path: 'cache', location: `${appEndpoint}/core/pages/Cache.vue`},
+                        {path: 'traffic', location: `${appEndpoint}/core/pages/Traffic.vue`},
+                        {path: 'notifies', location: `${appEndpoint}/core/pages/Notifies.vue`},
+                        {path: 'components', location: `${appEndpoint}/core/pages/frontend/Components.vue`, children: [
+                                {path: 'basic', location: `${appEndpoint}/core/pages/frontend/ComponentsBasic.vue`},
+                                {path: 'advanced', location: `${appEndpoint}/core/pages/frontend/ComponentsAdv.vue`},
+                                {path: 'theme', location: `${appEndpoint}/core/pages/frontend/Theme.vue`},
+                                {path: 'bootstrap', location: `${appEndpoint}/core/pages/frontend/Bootstrap.vue`},
+                            ]},
+                    ]}
+            ] },
+        { path: '/:pathMatch(.*)*', name: '404', location: `${appEndpoint}/core/Page404.vue` }
+
+    ]
+
+
+} // end of Constants
+

package/DefaultConfig.mjs

@@ -0,0 +1,177 @@
+/**
+ * Default Configuration for a C0ckp1t Application
+ */
+// ________________________________________________________________________________
+// 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 =  "default";
+// Used for requestion app components and files
+const appEndpoint = "";
+
+// ________________________________________________________________________________
+// GLOBAL CONSTANTS
+// ________________________________________________________________________________
+export default {
+    isDev: true,
+    WITH_CREDENTIALS: WITH_CREDENTIALS,
+
+    // logger config
+    defaultLogLevel: "INFO",
+    defaultLoggerLevels: {
+        "GlobalStore.mjs": "INFO",
+        "VueUtils.mjs": "INFO",
+        "Connection.mjs": "INFO",
+        "default": "INFO",
+        "anonymous": "INFO",
+        "demo": "INFO"
+    },
+
+    instanceId: instanceId,
+    type: "LOCAL",
+    appName:  "C0ckp1t App",
+    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}/connections`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["connections"],
+                name: "Connections",
+                children: []
+            },
+            {
+                depth: 1,
+                endpoint: `/${instanceId}/cache`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["cache"],
+                name: "Cache",
+                children: []
+            },
+            {
+                icon: "fa-network-wired",
+                depth: 1,
+                endpoint: `/${instanceId}/traffic`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["traffic"],
+                name: "Traffic",
+                children: []
+            },
+            {
+                icon: "fa-bell",
+                depth: 1,
+                endpoint: `/${instanceId}/notifies`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["notifies"],
+                name: "Notifies",
+                children: []
+            },
+            {
+                icon: "fa-info",
+                depth: 1,
+                endpoint: `/${instanceId}/docs`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["docs"],
+                name: "Documentation",
+                children: []
+            },
+            {
+                icon: "fa-info",
+                depth: 1,
+                endpoint: `/${instanceId}/components`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["components"],
+                name: "Components",
+                children: [
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/bootstrap`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["bootstrap"],
+                        name: "Bootstrap",
+                        children: []
+                    },
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/basic`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["basic"],
+                        name: "Basic",
+                        children: []
+                    },
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/advanced`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["advanced"],
+                        name: "Advanced",
+                        children: []
+                    },
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/theme`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["theme"],
+                        name: "Theme",
+                        children: []
+                    },
+                ]
+            }
+        ]
+    },
+
+    // This is used to create routes for the vue router
+    routes: [
+        { path: '/', name: 'root', children: [
+                {path: '', redirect: '/default/docs/Introduction.md'},
+                {path: `${instanceId}`, children :[
+                        {path: 'docs', redirect: `/${instanceId}/docs/Introduction.md`},
+                        {path: 'docs/:pathMatch(.*)*', location: `${appEndpoint}/core/pages/Documentation.vue`},
+                        {path: 'connections', location: `${appEndpoint}/core/pages/Connections.vue`},
+                        {path: 'connections/:id', location: `${appEndpoint}/core/pages/Connection.vue`},
+                        {path: 'cache', location: `${appEndpoint}/core/pages/Cache.vue`},
+                        {path: 'traffic', location: `${appEndpoint}/core/pages/Traffic.vue`},
+                        {path: 'notifies', location: `${appEndpoint}/core/pages/Notifies.vue`},
+                        {path: 'components', location: `${appEndpoint}/core/pages/frontend/Components.vue`, children: [
+                                {path: 'basic', location: `${appEndpoint}/core/pages/frontend/ComponentsBasic.vue`},
+                                {path: 'advanced', location: `${appEndpoint}/core/pages/frontend/ComponentsAdv.vue`},
+                                {path: 'theme', location: `${appEndpoint}/core/pages/frontend/Theme.vue`},
+                                {path: 'bootstrap', location: `${appEndpoint}/core/pages/frontend/Bootstrap.vue`},
+                            ]},
+                    ]}
+            ] },
+        { path: '/:pathMatch(.*)*', name: '404', location: `${appEndpoint}/core/Page404.vue` }
+
+    ]
+
+
+} // end of Constants
+

package/README.md

@@ -50,7 +50,8 @@ tar -zxvf c0ckp1t-1.0.2.tgz
 
 ## Releases
 
-* 1.0.5 - Beta: fixing cdn index-cdn.html making sure it works with jsfiddle.net
+* 1.0.10 - 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 

package/c0ckp1t-demo/C0ckp1tConfig.mjs

@@ -0,0 +1,68 @@
+// ________________________________________________________________________________
+// 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 = "";
+
+// ________________________________________________________________________________
+// 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/c0ckp1t-demo/CdnConfig.mjs

@@ -0,0 +1,68 @@
+// ________________________________________________________________________________
+// 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/c0ckp1t-demo/store.mjs

@@ -12,12 +12,12 @@ import {getLogger} from "Logging";
 import {store as storeMain, api as apiMain} from 'GlobalStore'
 
 // !# C0CKP1T_START import
-
+import C0ckp1tConfig from "./C0ckp1tConfig.mjs";
 // !# C0CKP1T_END import
 
-export const instanceId = "default"
+export const instanceId = C0ckp1tConfig.instanceId
 export const registry = storeMain.r[instanceId]
-export const routerEndpoint = `/${instanceId}/demo`
+export const routerEndpoint = `/${instanceId}`
 
 // ________________________________________________________________________________
 // LOGGING
@@ -35,7 +35,7 @@ export const store = reactive({
   id: LOG_HEADER,
   isLoading: false,
   isReady: true,
-  endpoint: "/demo",
+  endpoint: routerEndpoint,
 
 // !# C0CKP1T_START store
 

package/components/xjson.vue

@@ -5,11 +5,10 @@
 
 https://www.webcomponents.org/element/@alenaksu/json-viewer
 */
-import {computed, reactive, watch, onMounted, markRaw} from 'vue'
+import {computed, reactive, watch, onMounted, markRaw, defineAsyncComponent} from 'vue'
 
 import 'json-viewer';
 
-
 const props = defineProps({
   obj: Object,
   expanded: {

package/components/xsound.vue

@@ -4,7 +4,7 @@ import XDropdown2 from '/components/xdropdown2.vue'
 
 // https://wavesurfer-js.org/docs/
 // NOTE: streaming not supported?
-import WaveSurfer from '/js_ext/wavesurfer.esm.mjs'
+import WaveSurfer from 'wavesurfer'
 
 const STATE = {
     INIT: "INIT",

package/core/Content.mjs

@@ -4,7 +4,7 @@
  */
 import {reactive, ref, markRaw, onMounted, watch, computed, onErrorCaptured} from 'vue'
 // import { get, set, del } from 'idb-keyval'
-import {get, set, del} from '/js_ext/idb-keyval-6.2.2.mjs'
+import {get, set, del} from 'idb-keyval'
 
 export const articlesFiltered = computed(() => {
     return Content.articles.filter(article => {

package/core/CoreUtils.mjs

@@ -0,0 +1,77 @@
+/**
+ * Use window to extract the hostname, port, protocol, and whether the connection is secure.
+ * @returns {{hostname: string, port: string, protocol: string, isSecure: boolean}}
+ */
+export function findHostnamePortProtocol() {
+    const hostname = window.location.hostname
+    const protocol = window.location.protocol.toLowerCase()
+    const isSecure = protocol.toLowerCase() === 'https:'
+    const port = window.location.port || (isSecure ? "443" : "80")
+    const serverUrl = `${protocol}//${hostname}:${port}`
+    return {hostname, port, protocol, isSecure, serverUrl}
+}
+
+/**
+ * Validate and set defaults for the island config object.
+ * @param config
+ * @returns {*}
+ */
+export function validateIslandConfig(config) {
+    if (!config) {
+        throw new Error("Island config is required")
+    }
+    if (typeof config !== 'object') {
+        throw new Error("Island config must be an object must was `" + typeof config + "`")
+    }
+    if (typeof config.instanceId !== `string` || config.instanceId.trim() === ``) {
+        throw new Error(`Island config requires non-empty instanceId property`)
+    }
+    config.type ??= "LOCAL"
+
+    if (!Array.isArray(config?.routes) || config.routes.length === 0) {
+        config.routes = []
+    }
+
+    return config
+}
+
+/**
+ * Return the default Vue components
+ * @returns {Object}
+ */
+export function defaultVueComponents() {
+    return {
+        ExecButton: `/components/ExecButton.vue`,
+        XInput: `/components/xinput.vue`,
+        XLabel: `/components/xlabel.vue`,
+        XDropdown: `/components/xdropdown.vue`,
+        XDropdown2: `/components/xdropdown2.vue`,
+        XSection: `/components/xsection.vue`,
+        XTableOpen: `/components/xtable-open.vue`,
+        XCollapse: `/components/xcollapse.vue`,
+        XToggle: `/components/xtoggle.vue`,
+        XToggle3: `/components/xtoggle3.vue`,
+        XCheck: `/components/xcheck.vue`,
+        XCheckbox: `/components/xcheckbox.vue`,
+        XTextarea: `/components/xtextarea.vue`,
+        XHidden: `/components/xhidden.vue`,
+
+        XTabs: `/components/xtabs.vue`,
+        XKv: `/components/xkv.vue`,
+        XNav: `/components/xnav.vue`,
+        XMap: `/components/xmap.vue`,
+        XList: `/components/xlist.vue`,
+        XJson: `/components/xjson.vue`,
+        XCard: `/components/xcard.vue`,
+        XCardH: `/components/xcard-h.vue`,
+        XColor: `/components/xcolor.vue`,
+
+        "v-ace-editor": `/components/vue3-ace-editor.vue`,
+        XMarkdown: `/components/xmarkdown.vue`,
+        XSound: `/components/xsound.vue`,
+        XUpload: `/components/xupload.vue`,
+        XTree: `/components/xtree.vue`,
+        CodeMirror: `/components/CodeMirror.vue`,
+        XTerminal: `/components/XTerminal.vue`,
+    }
+}