npm - enigmatic - Versions diffs - 0.21.6 → 0.22.0 - Mend

enigmatic 0.21.6 → 0.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -61,7 +61,7 @@ The code creates a global object `w` that holds all the utility functions and st
 To use Enigmatic.js, include the script in your HTML file and call its functions as needed. For example:
 ```html
-<script src="path/to/enigmatic.js"></script>
+<script src="unpkg.com/enigmatic"></script>
 <script>
   // Perform custom element registration
   w.element('custom-element', {

package/components.js CHANGED Viewed

@@ -1,16 +1,8 @@
 window.components = {
-    'hello-world': {
-        style: 'color: red',
-        onMount: async x => console.log('mounted h-w'),
-        template: 'Hello World'
-    },
-    'random-users': {
-        template: 'Hello Random user: {results[0].name.first} {results[0].name.last}',
-        onMount: e => console.log('Mounted', e.tagName, e.props),
-        beforeData: x => x.results[0].name.first = 'John'
-    },
-    'tailwind-example': {
-        template: '<div class="bg-blue-300 text-white font-bold py-2 px-4 rounded">I am Tailwind</div>',
-        onMount: async e => await loadCSS('https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css')
+    "markdown-block": {
+        async init() {
+            await loadJS('https://cdn.jsdelivr.net/npm/marked/marked.min.js')
+            this.innerHTML = marked.parse(this.innerText)
+        }
     }
 }

package/enigmatic.js CHANGED Viewed

@@ -70,15 +70,15 @@ w.flatten = (obj, text) => {
   return htmls
 }
-w.e = (name, mount, style, fn) => {
+w.e = (name, fn = {}, style = {}) => {
   customElements.define(name, class extends HTMLElement {
     connectedCallback() {
       Object.assign(this.style, style)
-      if (mount) mount()
       Object.assign(this, fn)
       Object.keys(fn).filter(k=>k.match(/click/)).forEach(k=>{
         this.addEventListener(k, fn[k], true)
       })
+      if(this.init) this.init(this)
     }
   })
 }
@@ -111,7 +111,7 @@ w.element = (
 }
 if (window.components) {
-  for (let name in window.components) w.element(name, window.components[name])
+  for (let name in window.components) w.e(name, window.components[name], window.components[name]?.style)
 }
 w.state = new Proxy({}, {

package/index.html CHANGED Viewed

@@ -1,33 +1,76 @@
-<script src=components.js></script>
-<script src=enigmatic.js></script>
-<link rel=stylesheet href=enigmatic.css>
+<!DOCTYPE html>
+<html lang="en">
-<body style="--cols:3fr 10fr 3fr; --rows:3fr 11fr 2fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Enigmatic Library</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+        }
-    <div class="bg-white"></div>
-    <div class="bg-white">
-        <img height='62' style='filter:invert(50%)'
-          src='https://unpkg.com/simple-icons@v7/icons/apple.svg'>
+        .header {
+            background-color: #333;
+            color: #fff;
+            text-align: center;
+            padding: 1rem;
+        }
+        .container {
+            max-width: 800px;
+            margin: auto;
+            padding: 2rem;
+            background-color: #fff;
+            border-radius: 5px;
+            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        .description {
+            margin-top: 1rem;
+            font-size: 1.2rem;
+        }
+        .install {
+            margin-top: 2rem;
+            text-align: center;
+        }
+        .install-code {
+            background-color: #f0f0f0;
+            padding: 1rem;
+            border-radius: 5px;
+        }
+        .footer {
+            text-align: center;
+            padding: 1rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>Enigmatic</h1>
+        <p>Simpler front-end JS</p>
+    </div>
+    <div class="container">
+        <h2>What is Enigmatic?</h2>
+        <p class="description">
+            Enigmatic is a powerful JavaScript library designed to solve complex problems with ease.
+        </p>
+        <h2>Getting Started</h2>
+        <div class="install">
+            <p>To start using Enigmatic in your projects, simply include the following script tag:</p>
+            <pre class="install-code"><code>&lt;script src="https://unpkg.com/enigmatic"&gt;&lt;/script&gt;</code></pre>
+        </div>
     </div>
-    <div class="bg-white"></div>
-    <div class="bg-white"></div>
-    <section class="bg-white" style="--cols: 1fr 1fr 1fr; --rows: 1fr 1fr 1fr">
-        <div class="bg-green"></div>
-        <div class="bg-white"><hello-world></hello-world></div>
-        <div class="bg-white"></div>
-        <div class="bg-white"></div>
-        <div class="bg-white"></div>
-        <div class="bg-white"></div>
-        <div class="bg-white"></div>
-        <div class="bg-white"></div>
-        <div class="bg-green"></div>
-    </section>
-    <div class="bg-white"></div>
-    <div class="bg-yellow"></div>
-    <div class="bg-yellow"></div>
-    <div class="bg-yellow"></div>
-</body>
+    <div class="footer">
+        <p>&copy; 2023 Enigmatic. All rights reserved.</p>
+    </div>
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "enigmatic",
     "main": "enigmatic.js",
-    "version": "0.21.6",
+    "version": "0.22.0",
     "scripts": {
         "test": "node test.mjs"
     },

package/tests/test.html CHANGED Viewed

@@ -5,13 +5,12 @@
 <body style="--cols:1fr 10fr 1fr; --rows:1fr">
     <div class="bg-black">a</div>
     <section class="bg-white">
        <div id='par' fetch='[{"id": 1, "control": "input"},{"id": 2, "control": "select"}]'>
             <div>{control}</div>
             <test-element id="a{id}"></test-element>
             <br>
             <!--IGNORE-->
-                ignore this
+                <test-link></test-link>
             <!--ENDIGNORE-->
        </div>
     </section>
@@ -19,10 +18,16 @@
 </body>
 <script>
-    e('test-element', null, {border: '4px green solid'}, {
+    e('test-element', {
         set: o=>console.log(o),
-        click: x=>alert()
+        click: ev=>alert()
+    }, { border: '4px green solid' })
+    e('test-link', {
+        init: e => e.innerHTML = '<a>Click me</a>',
+        click: ev => alert()
     })
     /*
     More verbose:
     customElements.define('test-element', class extends HTMLElement {

package/authn.mjs DELETED Viewed

@@ -1,123 +0,0 @@
-ArrayBuffer.from = (string) => Uint8Array.from(string.split('').map(e => e.charCodeAt(0))).buffer
-const webauthn = async () => {
-    const op = {}
-    op.attestation = 'direct'
-    op.authenticatorSelection = {
-        authenticatorAttachment: 'platform',
-        requireResidentKey: false,
-        userVerification: 'discouraged'
-    }
-    op.challenge = ArrayBuffer.from('challenge')
-    op.pubKeyCredParams = []
-    op.rp = { id: location.hostname, name: location.hostname }
-    op.timeout = 60000,
-        op.user = { name: 'cb', displayName: 'cb', id: ArrayBuffer.from('cb') }
-    return {
-        async makeCredential() {
-            return await navigator.credentials.create({ publicKey: op })
-        },
-        async getAssertion() {
-            return await navigator.credentials.get({ publicKey: op })
-        }
-    }
-}
-const w = await webauthn()
-const credential = await w.makeCredential()
-const decodedClientData = JSON.parse(new TextDecoder('utf-8').decode(credential.response.clientDataJSON))
-console.log(decodedClientData)
-// decode credential.response.attestationObject
-//
- // w.getAssertion()
-//
-/*
-const credential = await navigator.credentials.create({
-    publicKey: {
-        challenge: Uint8Array.from(
-            'xxxxxx', c => c.charCodeAt(0)),
-        rp: {
-            name: "Test",
-            id: "localhost",
-        },
-        user: {
-            id: Uint8Array.from(
-                "UZSL85T9AFC", c => c.charCodeAt(0)),
-            name: "lee@webauthn.guide",
-            displayName: "Lee",
-        },
-        pubKeyCredParams: [{ alg: -7, type: "public-key" }],
-        authenticatorSelection: {
-            authenticatorAttachment: "cross-platform",
-        },
-        timeout: 60000,
-        attestation: "direct"
-    }
-})
-console.log(credential)
-// Auth
-const publicKeyCredentialRequestOptions = {
-    challenge: Uint8Array.from(
-        randomStringFromServer, c => c.charCodeAt(0)),
-    allowCredentials: [{
-        id: Uint8Array.from(
-            credentialId, c => c.charCodeAt(0)),
-        type: 'public-key',
-        transports: ['usb', 'ble', 'nfc'],
-    }],
-    timeout: 60000,
-}
-const assertion = await navigator.credentials.get({
-    publicKey: publicKeyCredentialRequestOptions
-})
-ArrayBuffer.from = (string) => Uint8Array.from(string.split('').map(e => e.charCodeAt(0))).buffer
-const webauthn = async () => {
-    //if(!await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable())
-    //    return false
-    const op = {}
-    op.attestation = 'direct'
-    op.authenticatorSelection = {
-        authenticatorAttachment: 'platform',
-        requireResidentKey: false,
-        userVerification: 'discouraged'
-    }
-    op.challenge = ArrayBuffer.from('challenge')
-    op.pubKeyCredParams = [{ alg: -7, type: 'public-key' }]
-    op.rp = { id: 'localhost', name: 'localhost' }
-    op.timeout = 60000,
-        op.user = { name: 'cb', displayName: 'cb', id: ArrayBuffer.from('cb') }
-    return {
-        async makeCredential() {
-            const cred = await navigator.credentials.create({ publicKey: op })
-            return cred
-        },
-        async getAssertion() {
-            const cred = await navigator.credentials.get({ publicKey: op })
-            return cred
-        }
-    }
-}
-const w = await webauthn()
-w.makeCredential().then(e => console.log(e))
-//w.getAssertion().then(e => console.log(e))
-/*
-send to server
-{
-            credential: {type: 'FIDO', id: attestation.id},
-            clientData: attestation.signature.clientData,
-            authnrData: attestation.signature.authnrData,
-            signature: attestation.signature.signature
-        }
-        */