cradova 1.0.0

package/scripts/css.js

@@ -0,0 +1,41 @@
+/**
+Write CSS styles in Javascript
+@example
+
+css("#container",
+{
+    height: "100%",
+    height: "100%",
+    background-color: "#ff9800"
+})
+
+css(".btn:hover",
+{
+    height: "100%",
+    height: "100%",
+    background-color: "#ff9800"
+})
+
+*/
+export default function css(indentifier, properties) {
+    /*This is for creating
+   css styles using javascipt*/
+    const styS = "" + indentifier + "{";
+    const styE = "}";
+    let style = "", totalStyle = "";
+    for (const [k, v] of Object.entries(properties)) {
+        style += "" + k + ": " + v + ";";
+    }
+    let styleTag = document.querySelector("style");
+    if (styleTag !== null) {
+        totalStyle += styleTag.innerHTML;
+        totalStyle += styS + style + styE;
+        styleTag.innerHTML = totalStyle;
+        return;
+    }
+    styleTag = document.createElement("style");
+    totalStyle += styleTag.innerHTML;
+    totalStyle += styS + style + styE;
+    styleTag.innerHTML = totalStyle;
+    document.head.append(styleTag);
+}

package/scripts/css.ts

@@ -0,0 +1,46 @@
+/**
+Write CSS styles in Javascript
+@example
+
+css("#container",
+{
+    height: "100%",
+    height: "100%",
+    background-color: "#ff9800"
+})
+
+css(".btn:hover",
+{
+    height: "100%",
+    height: "100%",
+    background-color: "#ff9800"
+})
+
+*/
+
+export default function css(
+  indentifier: string,
+  properties: Record<string, string>
+) {
+  /*This is for creating
+ css styles using javascipt*/
+  const styS = "" + indentifier + "{";
+  const styE = "}";
+  let style = "",
+    totalStyle = "";
+  for (const [k, v] of Object.entries(properties)) {
+    style += "" + k + ": " + v + ";";
+  }
+  let styleTag = document.querySelector("style");
+  if (styleTag !== null) {
+    totalStyle += styleTag.innerHTML;
+    totalStyle += styS + style + styE;
+    styleTag.innerHTML = totalStyle;
+    return;
+  }
+  styleTag = document.createElement("style");
+  totalStyle += styleTag.innerHTML;
+  totalStyle += styS + style + styE;
+  styleTag.innerHTML = totalStyle;
+  document.head.append(styleTag);
+}

package/scripts/dispatcher.d.ts

@@ -0,0 +1 @@
+export default function dispatch(state: any, stateID: any): any;

package/scripts/dispatcher.js

@@ -0,0 +1,57 @@
+// the global dispatcher
+import fullScreen from "./fullscreen.js";
+export default function dispatch(state, stateID) {
+    const nodes = document.querySelectorAll(".cra_child_doc");
+    window._.globalState = { state: state, stateID: stateID };
+    let node;
+    nodes.forEach((element) => {
+        // check if the element is mounted
+        if (!element.parentElement && !element.parentElement.parentElement) {
+            throw new Error("can't render an unmouted element");
+        }
+        // abort rendering if the state is not for this element
+        if (!element.stateID && element.stateID !== window._.globalState.stateID) {
+            return;
+        }
+        if (element.stateID !== window._.globalState.stateID) {
+            return;
+        }
+        // updating the element's state
+        for (const key in window._.globalState.state) {
+            if (key === "style") {
+                for (const [k, v] of Object.entries(window._.globalState.state[key])) {
+                    element.style[k] = v;
+                }
+                continue;
+            }
+            if (key === "text") {
+                element.innerText = window._.globalState.state[key];
+                continue;
+            }
+            if (key === "fullscreen") {
+                if (window._.globalState.state[key]) {
+                    fullScreen(element).set();
+                }
+                else {
+                    fullScreen(element).exist();
+                }
+                continue;
+            }
+            if (key === "class") {
+                element.classList.add(window._.globalState.state[key]);
+                continue;
+            }
+            if (key === "toggleclass") {
+                element.classList.toggle(window._.globalState.state[key]);
+                continue;
+            }
+            if (key === "removeclass") {
+                element.classList.remove(window._.globalState.state[key]);
+                continue;
+            }
+            element[key] = window._.globalState.state[key];
+        }
+        node = element;
+    });
+    return node;
+}

package/scripts/dispatcher.ts

@@ -0,0 +1,58 @@
+// the global dispatcher
+import fullScreen from "./fullscreen.js";
+
+export default function dispatch(state, stateID) {
+  const nodes = document.querySelectorAll(".cra_child_doc");
+  window._.globalState = { state: state, stateID: stateID };
+  let node;
+  nodes.forEach((element) => {
+    // check if the element is mounted
+    if (!element.parentElement && !element.parentElement.parentElement) {
+      throw new Error("can't render an unmouted element");
+    }
+    // abort rendering if the state is not for this element
+    if (!element.stateID && element.stateID !== window._.globalState.stateID) {
+      return;
+    }
+    if (element.stateID !== window._.globalState.stateID) {
+      return;
+    }
+
+    // updating the element's state
+    for (const key in window._.globalState.state) {
+      if (key === "style") {
+        for (const [k, v] of Object.entries(window._.globalState.state[key])) {
+          element.style[k] = v;
+        }
+        continue;
+      }
+      if (key === "text") {
+        element.innerText = window._.globalState.state[key];
+        continue;
+      }
+      if (key === "fullscreen") {
+        if (window._.globalState.state[key]) {
+          fullScreen(element).set();
+        } else {
+          fullScreen(element).exist();
+        }
+        continue;
+      }
+      if (key === "class") {
+        element.classList.add(window._.globalState.state[key]);
+        continue;
+      }
+      if (key === "toggleclass") {
+        element.classList.toggle(window._.globalState.state[key]);
+        continue;
+      }
+      if (key === "removeclass") {
+        element.classList.remove(window._.globalState.state[key]);
+        continue;
+      }
+      element[key] = window._.globalState.state[key];
+    }
+    node = element;
+  });
+  return node;
+}

package/scripts/file-system.d.ts

@@ -0,0 +1,2 @@
+declare const fs: {};
+export default fs;

package/scripts/file-system.js

@@ -0,0 +1,175 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const fs = {};
+/**
+ * Open a handle to an existing file on the local file system.
+ *
+ * @return {!Promise<FileSystemFileHandle>} Handle to the existing file.
+ */
+fs.getFileHandle = function () {
+    // For Chrome 86 and later...
+    if ("showOpenFilePicker" in window) {
+        return window.showOpenFilePicker().then((handles) => handles[0]);
+    }
+    // For Chrome 85 and earlier...
+    return window.chooseFileSystemEntries();
+};
+/**
+ * Create a handle to a new (text) file on the local file system.
+ *
+ * @return {!Promise<FileSystemFileHandle>} Handle to the new file.
+ */
+fs.getNewFileHandle = function () {
+    // For Chrome 86 and later...
+    if ("showSaveFilePicker" in window) {
+        const opts = {
+            types: [
+                {
+                    description: "Text file",
+                    accept: { "text/plain": [".txt"] },
+                },
+            ],
+        };
+        return window.showSaveFilePicker(opts);
+    }
+    // For Chrome 85 and earlier...
+    const opts = {
+        type: "save-file",
+        accepts: [
+            {
+                description: "Text file",
+                extensions: ["txt"],
+                mimeTypes: ["text/plain"],
+            },
+        ],
+    };
+    return window.chooseFileSystemEntries(opts);
+};
+/**
+ * Reads the raw text from a file.
+ *
+ * @param {File} file
+ * @return {!Promise<string>} A promise that resolves to the parsed string.
+ */
+fs.readFile = function (file) {
+    // If the new .text() reader is available, use it.
+    if (file.text) {
+        return file.text();
+    }
+    // Otherwise use the traditional file reading technique.
+    return fs.readFileLegacy(file);
+};
+/**
+ * Reads the raw text from a file.
+ *
+ * @private
+ * @param {File} file
+ * @return {Promise<string>} A promise that resolves to the parsed string.
+ */
+fs.readFileLegacy = function (file) {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.addEventListener("loadend", (e) => {
+            const text = e.srcElement.result;
+            resolve(text);
+        });
+        reader.readAsText(file);
+    });
+};
+/**
+ * Writes the contents to disk.
+ *
+ * @param {FileSystemFileHandle} fileHandle File handle to write to.
+ * @param {string} contents Contents to write.
+ */
+fs.writeFile = function (fileHandle, contents) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Support for Chrome 82 and earlier.
+        if (fileHandle.createWriter) {
+            // Create a writer (request permission if necessary).
+            const writer = yield fileHandle.createWriter();
+            // Write the full length of the contents
+            yield writer.write(0, contents);
+            // Close the file and write the contents to disk
+            yield writer.close();
+            return;
+        }
+        // For Chrome 83 and later.
+        // Create a FileSystemWritableFileStream to write to.
+        const writable = yield fileHandle.createWritable();
+        // Write the contents of the file to the stream.
+        yield writable.write(contents);
+        // Close the file and write the contents to disk.
+        yield writable.close();
+    });
+};
+/**
+ * Verify the user has granted permission to read or write to the file, if
+ * permission hasn't been granted, request permission.
+ *
+ * @param {FileSystemFileHandle} fileHandle File handle to check.
+ * @param {boolean} withWrite True if write permission should be checked.
+ * @return {boolean} True if the user has granted read/write permission.
+ */
+fs.verifyPermission = function (fileHandle, withWrite) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const opts = {};
+        if (withWrite) {
+            opts.writable = true;
+            // For Chrome 86 and later...
+            opts.mode = "readwrite";
+        }
+        // Check if we already have permission, if so, return true.
+        if ((yield fileHandle.queryPermission(opts)) === "granted") {
+            return true;
+        }
+        // Request permission to the file, if the user grants permission, return true.
+        if ((yield fileHandle.requestPermission(opts)) === "granted") {
+            return true;
+        }
+        // The user did nt grant permission, return false.
+        return false;
+    });
+};
+/**
+ * Uses the <input type="file"> to open a new file
+ *
+ * @return {!Promise<File>} File selected by the user.
+ */
+fs.getFileLegacy = () => {
+    return new Promise((resolve, reject) => {
+        filePicker.onchange = (e) => {
+            const file = filePicker.files[0];
+            if (file) {
+                resolve(file);
+                return;
+            }
+            reject(new Error("AbortError"));
+        };
+        filePicker.click();
+    });
+};
+/**
+ * Saves a file by creating a downloadable instance, and clicking on the
+ * download link.
+ *
+ * @param {string} filename Filename to save the file as.
+ * @param {string} contents Contents of the file to save.
+ */
+// function saveAsLegacy(filename, contents) {
+fs.saveAsLegacy = (filename, contents) => {
+    filename = filename || "Untitled.txt";
+    const opts = { type: "text/plain" };
+    const file = new File([contents], "", opts);
+    aDownloadFile.href = window.URL.createObjectURL(file);
+    aDownloadFile.setAttribute("download", filename);
+    aDownloadFile.click();
+};
+export default fs;

package/scripts/file-system.ts

@@ -0,0 +1,177 @@
+const fs = {};
+
+/**
+ * Open a handle to an existing file on the local file system.
+ *
+ * @return {!Promise<FileSystemFileHandle>} Handle to the existing file.
+ */
+fs.getFileHandle = function (): Promise<FileSystemFileHandle> {
+  // For Chrome 86 and later...
+  if ("showOpenFilePicker" in window) {
+    return window.showOpenFilePicker().then((handles: any[]) => handles[0]);
+  }
+  // For Chrome 85 and earlier...
+  return window.chooseFileSystemEntries();
+};
+
+/**
+ * Create a handle to a new (text) file on the local file system.
+ *
+ * @return {!Promise<FileSystemFileHandle>} Handle to the new file.
+ */
+fs.getNewFileHandle = function (): Promise<FileSystemFileHandle> {
+  // For Chrome 86 and later...
+  if ("showSaveFilePicker" in window) {
+    const opts = {
+      types: [
+        {
+          description: "Text file",
+          accept: { "text/plain": [".txt"] },
+        },
+      ],
+    };
+    return window.showSaveFilePicker(opts);
+  }
+  // For Chrome 85 and earlier...
+  const opts = {
+    type: "save-file",
+    accepts: [
+      {
+        description: "Text file",
+        extensions: ["txt"],
+        mimeTypes: ["text/plain"],
+      },
+    ],
+  };
+  return window.chooseFileSystemEntries(opts);
+};
+
+/**
+ * Reads the raw text from a file.
+ *
+ * @param {File} file
+ * @return {!Promise<string>} A promise that resolves to the parsed string.
+ */
+fs.readFile = function (file: File): Promise<string> {
+  // If the new .text() reader is available, use it.
+  if (file.text) {
+    return file.text();
+  }
+  // Otherwise use the traditional file reading technique.
+  return fs.readFileLegacy(file);
+};
+
+/**
+ * Reads the raw text from a file.
+ *
+ * @private
+ * @param {File} file
+ * @return {Promise<string>} A promise that resolves to the parsed string.
+ */
+fs.readFileLegacy = function (file: File): Promise<string> {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.addEventListener("loadend", (e) => {
+      const text = e.srcElement.result;
+      resolve(text);
+    });
+    reader.readAsText(file);
+  });
+};
+
+/**
+ * Writes the contents to disk.
+ *
+ * @param {FileSystemFileHandle} fileHandle File handle to write to.
+ * @param {string} contents Contents to write.
+ */
+fs.writeFile = async function (
+  fileHandle: FileSystemFileHandle,
+  contents: string
+) {
+  // Support for Chrome 82 and earlier.
+  if (fileHandle.createWriter) {
+    // Create a writer (request permission if necessary).
+    const writer = await fileHandle.createWriter();
+    // Write the full length of the contents
+    await writer.write(0, contents);
+    // Close the file and write the contents to disk
+    await writer.close();
+    return;
+  }
+  // For Chrome 83 and later.
+  // Create a FileSystemWritableFileStream to write to.
+  const writable = await fileHandle.createWritable();
+  // Write the contents of the file to the stream.
+  await writable.write(contents);
+  // Close the file and write the contents to disk.
+  await writable.close();
+};
+
+/**
+ * Verify the user has granted permission to read or write to the file, if
+ * permission hasn't been granted, request permission.
+ *
+ * @param {FileSystemFileHandle} fileHandle File handle to check.
+ * @param {boolean} withWrite True if write permission should be checked.
+ * @return {boolean} True if the user has granted read/write permission.
+ */
+fs.verifyPermission = async function (
+  fileHandle: FileSystemFileHandle,
+  withWrite: boolean
+): boolean {
+  const opts = {};
+  if (withWrite) {
+    opts.writable = true;
+    // For Chrome 86 and later...
+    opts.mode = "readwrite";
+  }
+  // Check if we already have permission, if so, return true.
+  if ((await fileHandle.queryPermission(opts)) === "granted") {
+    return true;
+  }
+  // Request permission to the file, if the user grants permission, return true.
+  if ((await fileHandle.requestPermission(opts)) === "granted") {
+    return true;
+  }
+  // The user did nt grant permission, return false.
+  return false;
+};
+
+/**
+ * Uses the <input type="file"> to open a new file
+ *
+ * @return {!Promise<File>} File selected by the user.
+ */
+fs.getFileLegacy = (): Promise<File> => {
+  return new Promise((resolve, reject) => {
+    filePicker.onchange = (e: any) => {
+      const file = filePicker.files[0];
+      if (file) {
+        resolve(file);
+        return;
+      }
+      reject(new Error("AbortError"));
+    };
+    filePicker.click();
+  });
+};
+
+/**
+ * Saves a file by creating a downloadable instance, and clicking on the
+ * download link.
+ *
+ * @param {string} filename Filename to save the file as.
+ * @param {string} contents Contents of the file to save.
+ */
+// function saveAsLegacy(filename, contents) {
+fs.saveAsLegacy = (filename: string, contents: string) => {
+  filename = filename || "Untitled.txt";
+  const opts = { type: "text/plain" };
+  const file = new File([contents], "", opts);
+  aDownloadFile.href = window.URL.createObjectURL(file);
+  aDownloadFile.setAttribute("download", filename);
+  aDownloadFile.click();
+};
+
+export default fs;

package/scripts/fullscreen.d.ts

@@ -0,0 +1,4 @@
+export default function fullScreen(e: HTMLElement): {
+    set(): void;
+    exist(): void;
+};

package/scripts/fullscreen.js

@@ -0,0 +1,29 @@
+// for making the dom elements fulscreen
+export default function fullScreen(e) {
+    return {
+        set() {
+            e.requestFullscreen().catch((err) => {
+                throw err;
+            });
+        },
+        exist() {
+            document.exitFullscreen();
+        },
+        // toggle: () => {
+        //   if (!document.fullscreenElement) {
+        //     e.requestFullscreen().catch((err) => {
+        //       throw err;
+        //     });
+        //   } else {
+        //     document.exitFullscreen();
+        //   }
+        // },
+    };
+}
+/*
+ *** HOW TO USE ***
+
+u("#container").fullscreen().toggle()
+u("#container").fullscreen().exist()
+u("#container").fullscreen().set()
+*/

package/scripts/fullscreen.ts

@@ -0,0 +1,30 @@
+// for making the dom elements fulscreen
+export default function fullScreen(e: HTMLElement) {
+  return {
+    set() {
+      e.requestFullscreen().catch((err) => {
+        throw err;
+      });
+    },
+    exist() {
+      document.exitFullscreen();
+    },
+    // toggle: () => {
+    //   if (!document.fullscreenElement) {
+    //     e.requestFullscreen().catch((err) => {
+    //       throw err;
+    //     });
+    //   } else {
+    //     document.exitFullscreen();
+    //   }
+    // },
+  };
+}
+
+/*
+ *** HOW TO USE ***
+
+u("#container").fullscreen().toggle()
+u("#container").fullscreen().exist()
+u("#container").fullscreen().set()
+*/

package/scripts/init.d.ts

@@ -0,0 +1,2 @@
+declare const Init: (config: Record<string, string>) => HTMLDivElement;
+export default Init;

package/scripts/init.js

@@ -0,0 +1,17 @@
+import css from "./css.js";
+const Init = function (config) {
+    const Wrapper = document.createElement("div");
+    Wrapper.className = "Cradova-app-wrappper";
+    Wrapper.id = "app-wrapper";
+    css(".Cradova-app-wrappper", {
+        display: "flex",
+        "align-items": "center",
+        "justify-content": "center",
+        "flex-direction": "column",
+        width: "100%",
+    });
+    // Wrapper.stateID = "Cradova-app-wrappper-id";
+    document.body.append(Wrapper);
+    return Wrapper;
+};
+export default Init;

package/scripts/init.ts

@@ -0,0 +1,18 @@
+import css from "./css.js";
+const Init = function (config: Record<string, string>) {
+  const Wrapper = document.createElement("div");
+  Wrapper.className = "Cradova-app-wrappper";
+  Wrapper.id = "app-wrapper";
+  css(".Cradova-app-wrappper", {
+    display: "flex",
+    "align-items": "center",
+    "justify-content": "center",
+    "flex-direction": "column",
+    width: "100%",
+  });
+  // Wrapper.stateID = "Cradova-app-wrappper-id";
+  document.body.append(Wrapper);
+  return Wrapper;
+};
+
+export default Init;

package/scripts/localStorage.d.ts

@@ -0,0 +1,9 @@
+declare type l = {
+    store: (name: string, value: unknown) => void;
+    retrieve: (name: string) => void;
+    remove: (name: string) => void;
+    getKey: (index: number) => void;
+    clear: () => void;
+};
+declare let ls: l;
+export default ls;