clapton 0.0.12 → 0.0.14

data/lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/virtual/helpers.ts

@@ -0,0 +1,461 @@
+import {
+    diffNodeType,
+    elementDiffNodeType,
+    elementNodeType,
+    nodeType,
+    subsetType,
+    textDiffNodeType,
+    textNodeType,
+} from "../types"
+import { Diff } from "../helpers"
+const elementDescriptors = (el: diffNodeType) => {
+    const output = []
+    output.push(el.nodeName)
+    if (el.nodeName !== "#text" && el.nodeName !== "#comment") {
+        el = el as elementDiffNodeType
+        if (el.attributes) {
+            if (el.attributes["class"]) {
+                output.push(
+                    `${el.nodeName}.${el.attributes["class"].replace(
+                        / /g,
+                        ".",
+                    )}`,
+                )
+            }
+            if (el.attributes.id) {
+                output.push(`${el.nodeName}#${el.attributes.id}`)
+            }
+        }
+    }
+    return output
+}
+
+const findUniqueDescriptors = (li: diffNodeType[]) => {
+    const uniqueDescriptors = {}
+    const duplicateDescriptors = {}
+
+    li.forEach((node: nodeType) => {
+        elementDescriptors(node).forEach((descriptor) => {
+            const inUnique = descriptor in uniqueDescriptors
+            const inDupes = descriptor in duplicateDescriptors
+            if (!inUnique && !inDupes) {
+                uniqueDescriptors[descriptor] = true
+            } else if (inUnique) {
+                delete uniqueDescriptors[descriptor]
+                duplicateDescriptors[descriptor] = true
+            }
+        })
+    })
+
+    return uniqueDescriptors
+}
+
+export const uniqueInBoth = (l1: diffNodeType[], l2: diffNodeType[]) => {
+    const l1Unique = findUniqueDescriptors(l1)
+    const l2Unique = findUniqueDescriptors(l2)
+    const inBoth = {}
+
+    Object.keys(l1Unique).forEach((key) => {
+        if (l2Unique[key]) {
+            inBoth[key] = true
+        }
+    })
+
+    return inBoth
+}
+
+export const removeDone = (tree: elementDiffNodeType) => {
+    delete tree.outerDone
+    delete tree.innerDone
+    delete tree.valueDone
+    if (tree.childNodes) {
+        return tree.childNodes.every(removeDone)
+    } else {
+        return true
+    }
+}
+
+export const cleanNode = (diffNode: diffNodeType) => {
+    if (Object.prototype.hasOwnProperty.call(diffNode, "data")) {
+        const textNode: textNodeType = {
+            nodeName: diffNode.nodeName === "#text" ? "#text" : "#comment",
+            data: (diffNode as textDiffNodeType).data,
+        }
+        return textNode
+    } else {
+        const elementNode: elementNodeType = {
+            nodeName: diffNode.nodeName,
+        }
+        diffNode = diffNode as elementDiffNodeType
+        if (Object.prototype.hasOwnProperty.call(diffNode, "attributes")) {
+            elementNode.attributes = { ...diffNode.attributes }
+        }
+        if (Object.prototype.hasOwnProperty.call(diffNode, "checked")) {
+            elementNode.checked = diffNode.checked
+        }
+        if (Object.prototype.hasOwnProperty.call(diffNode, "value")) {
+            elementNode.value = diffNode.value
+        }
+        if (Object.prototype.hasOwnProperty.call(diffNode, "selected")) {
+            elementNode.selected = diffNode.selected
+        }
+        if (Object.prototype.hasOwnProperty.call(diffNode, "childNodes")) {
+            elementNode.childNodes = diffNode.childNodes.map((diffChildNode) =>
+                cleanNode(diffChildNode),
+            )
+        }
+        return elementNode
+    }
+}
+
+export const isEqual = (e1: diffNodeType, e2: diffNodeType) => {
+    if (
+        !["nodeName", "value", "checked", "selected", "data"].every(
+            (element) => {
+                if (e1[element] !== e2[element]) {
+                    return false
+                }
+                return true
+            },
+        )
+    ) {
+        return false
+    }
+    if (Object.prototype.hasOwnProperty.call(e1, "data")) {
+        // Comment or Text
+        return true
+    }
+    e1 = e1 as elementDiffNodeType
+    e2 = e2 as elementDiffNodeType
+    if (Boolean(e1.attributes) !== Boolean(e2.attributes)) {
+        return false
+    }
+
+    if (Boolean(e1.childNodes) !== Boolean(e2.childNodes)) {
+        return false
+    }
+    if (e1.attributes) {
+        const e1Attributes = Object.keys(e1.attributes)
+        const e2Attributes = Object.keys(e2.attributes)
+
+        if (e1Attributes.length !== e2Attributes.length) {
+            return false
+        }
+        if (
+            !e1Attributes.every((attribute) => {
+                if (
+                    (e1 as elementDiffNodeType).attributes[attribute] !==
+                    (e2 as elementDiffNodeType).attributes[attribute]
+                ) {
+                    return false
+                }
+                return true
+            })
+        ) {
+            return false
+        }
+    }
+    if (e1.childNodes) {
+        if (e1.childNodes.length !== e2.childNodes.length) {
+            return false
+        }
+        if (
+            !e1.childNodes.every((childNode: nodeType, index: number) =>
+                isEqual(childNode, e2.childNodes[index]),
+            )
+        ) {
+            return false
+        }
+    }
+
+    return true
+}
+
+export const roughlyEqual = (
+    e1: diffNodeType,
+    e2: diffNodeType,
+    uniqueDescriptors: { [key: string]: boolean },
+    sameSiblings: boolean,
+    preventRecursion = false,
+) => {
+    if (!e1 || !e2) {
+        return false
+    }
+
+    if (e1.nodeName !== e2.nodeName) {
+        return false
+    }
+
+    if (["#text", "#comment"].includes(e1.nodeName)) {
+        // Note that we initially don't care what the text content of a node is,
+        // the mere fact that it's the same tag and "has text" means it's roughly
+        // equal, and then we can find out the true text difference later.
+        return preventRecursion
+            ? true
+            : (e1 as textDiffNodeType).data === (e2 as textDiffNodeType).data
+    }
+
+    e1 = e1 as elementDiffNodeType
+    e2 = e2 as elementDiffNodeType
+
+    if (e1.nodeName in uniqueDescriptors) {
+        return true
+    }
+
+    if (e1.attributes && e2.attributes) {
+        if (e1.attributes.id) {
+            if (e1.attributes.id !== e2.attributes.id) {
+                return false
+            } else {
+                const idDescriptor = `${e1.nodeName}#${e1.attributes.id}`
+                if (idDescriptor in uniqueDescriptors) {
+                    return true
+                }
+            }
+        }
+        if (
+            e1.attributes["class"] &&
+            e1.attributes["class"] === e2.attributes["class"]
+        ) {
+            const classDescriptor = `${e1.nodeName}.${e1.attributes[
+                "class"
+            ].replace(/ /g, ".")}`
+            if (classDescriptor in uniqueDescriptors) {
+                return true
+            }
+        }
+    }
+
+    if (sameSiblings) {
+        return true
+    }
+
+    const nodeList1 = e1.childNodes ? e1.childNodes.slice().reverse() : []
+    const nodeList2 = e2.childNodes ? e2.childNodes.slice().reverse() : []
+
+    if (nodeList1.length !== nodeList2.length) {
+        return false
+    }
+
+    if (preventRecursion) {
+        return nodeList1.every(
+            (element: nodeType, index: number) =>
+                element.nodeName === nodeList2[index].nodeName,
+        )
+    } else {
+        // note: we only allow one level of recursion at any depth. If 'preventRecursion'
+        // was not set, we must explicitly force it to true for child iterations.
+        const childUniqueDescriptors = uniqueInBoth(nodeList1, nodeList2)
+        return nodeList1.every((element: nodeType, index: number) =>
+            roughlyEqual(
+                element,
+                nodeList2[index],
+                childUniqueDescriptors,
+                true,
+                true,
+            ),
+        )
+    }
+}
+
+/**
+ * based on https://en.wikibooks.org/wiki/Algorithm_implementation/Strings/Longest_common_substring#JavaScript
+ */
+const findCommonSubsets = (
+    c1: diffNodeType[],
+    c2: diffNodeType[],
+    marked1: boolean[],
+    marked2: boolean[],
+) => {
+    let lcsSize = 0
+    let index: number[] = []
+    const c1Length = c1.length
+    const c2Length = c2.length
+
+    const // set up the matching table
+        matches = [...new Array(c1Length + 1)].map(() => [])
+
+    const uniqueDescriptors = uniqueInBoth(c1, c2)
+
+    let // If all of the elements are the same tag, id and class, then we can
+        // consider them roughly the same even if they have a different number of
+        // children. This will reduce removing and re-adding similar elements.
+        subsetsSame = c1Length === c2Length
+
+    if (subsetsSame) {
+        c1.some((element: nodeType, i: number) => {
+            const c1Desc = elementDescriptors(element)
+            const c2Desc = elementDescriptors(c2[i])
+            if (c1Desc.length !== c2Desc.length) {
+                subsetsSame = false
+                return true
+            }
+            c1Desc.some((description, i) => {
+                if (description !== c2Desc[i]) {
+                    subsetsSame = false
+                    return true
+                }
+            })
+            if (!subsetsSame) {
+                return true
+            }
+        })
+    }
+
+    // fill the matches with distance values
+    for (let c1Index = 0; c1Index < c1Length; c1Index++) {
+        const c1Element = c1[c1Index]
+        for (let c2Index = 0; c2Index < c2Length; c2Index++) {
+            const c2Element = c2[c2Index]
+            if (
+                !marked1[c1Index] &&
+                !marked2[c2Index] &&
+                roughlyEqual(
+                    c1Element,
+                    c2Element,
+                    uniqueDescriptors,
+                    subsetsSame,
+                )
+            ) {
+                matches[c1Index + 1][c2Index + 1] = matches[c1Index][c2Index]
+                    ? matches[c1Index][c2Index] + 1
+                    : 1
+                if (matches[c1Index + 1][c2Index + 1] >= lcsSize) {
+                    lcsSize = matches[c1Index + 1][c2Index + 1]
+                    index = [c1Index + 1, c2Index + 1]
+                }
+            } else {
+                matches[c1Index + 1][c2Index + 1] = 0
+            }
+        }
+    }
+
+    if (lcsSize === 0) {
+        return false
+    }
+
+    return {
+        oldValue: index[0] - lcsSize,
+        newValue: index[1] - lcsSize,
+        length: lcsSize,
+    }
+}
+
+const makeBooleanArray = (n: number, v: boolean) =>
+    [...new Array(n)].map(() => v)
+
+/**
+ * Generate arrays that indicate which node belongs to which subset,
+ * or whether it's actually an orphan node, existing in only one
+ * of the two trees, rather than somewhere in both.
+ *
+ * So if t1 = <img><canvas><br>, t2 = <canvas><br><img>.
+ * The longest subset is "<canvas><br>" (length 2), so it will group 0.
+ * The second longest is "<img>" (length 1), so it will be group 1.
+ * gaps1 will therefore be [1,0,0] and gaps2 [0,0,1].
+ *
+ * If an element is not part of any group, it will stay being 'true', which
+ * is the initial value. For example:
+ * t1 = <img><p></p><br><canvas>, t2 = <b></b><br><canvas><img>
+ *
+ * The "<p></p>" and "<b></b>" do only show up in one of the two and will
+ * therefore be marked by "true". The remaining parts are parts of the
+ * groups 0 and 1:
+ * gaps1 = [1, true, 0, 0], gaps2 = [true, 0, 0, 1]
+ *
+ */
+export const getGapInformation = (
+    t1: elementDiffNodeType,
+    t2: elementDiffNodeType,
+    stable: subsetType[],
+) => {
+    const gaps1: (true | number)[] = t1.childNodes
+        ? (makeBooleanArray(t1.childNodes.length, true) as true[])
+        : []
+    const gaps2: (true | number)[] = t2.childNodes
+        ? (makeBooleanArray(t2.childNodes.length, true) as true[])
+        : []
+    let group = 0
+
+    // give elements from the same subset the same group number
+    stable.forEach((subset: subsetType) => {
+        const endOld = subset.oldValue + subset.length
+        const endNew = subset.newValue + subset.length
+
+        for (let j = subset.oldValue; j < endOld; j += 1) {
+            gaps1[j] = group
+        }
+        for (let j = subset.newValue; j < endNew; j += 1) {
+            gaps2[j] = group
+        }
+        group += 1
+    })
+
+    return {
+        gaps1,
+        gaps2,
+    }
+}
+
+/**
+ * Find all matching subsets, based on immediate child differences only.
+ */
+const markBoth = (marked1, marked2, subset: subsetType, i: number) => {
+    marked1[subset.oldValue + i] = true
+    marked2[subset.newValue + i] = true
+}
+
+export const markSubTrees = (
+    oldTree: elementDiffNodeType,
+    newTree: elementDiffNodeType,
+) => {
+    // note: the child lists are views, and so update as we update old/newTree
+    const oldChildren = oldTree.childNodes ? oldTree.childNodes : []
+
+    const newChildren = newTree.childNodes ? newTree.childNodes : []
+    const marked1 = makeBooleanArray(oldChildren.length, false)
+    const marked2 = makeBooleanArray(newChildren.length, false)
+    const subsets = []
+
+    const returnIndex = function () {
+        return arguments[1]
+    }
+
+    let foundAllSubsets = false
+
+    while (!foundAllSubsets) {
+        const subset = findCommonSubsets(
+            oldChildren,
+            newChildren,
+            marked1,
+            marked2,
+        )
+        if (subset) {
+            subsets.push(subset)
+            const subsetArray = [...new Array(subset.length)].map(returnIndex)
+            subsetArray.forEach((item) =>
+                markBoth(marked1, marked2, subset, item),
+            )
+        } else {
+            foundAllSubsets = true
+        }
+    }
+
+    oldTree.subsets = subsets
+    oldTree.subsetsAge = 100
+    return subsets
+}
+
+export class DiffTracker {
+    list: Diff[]
+    constructor() {
+        this.list = []
+    }
+
+    add(diffs: Diff[]) {
+        this.list.push(...diffs)
+    }
+    forEach(fn: (Diff) => void) {
+        this.list.forEach((li: Diff) => fn(li))
+    }
+}

data/lib/clapton/javascripts/node_modules/diff-dom/src/diffDOM/virtual/index.ts

@@ -0,0 +1,3 @@
+export { DiffFinder } from "./diff"
+export { nodeToObj } from "./fromDOM"
+export { stringToObj } from "./fromString"

data/lib/clapton/javascripts/node_modules/diff-dom/src/index.ts

@@ -0,0 +1,2 @@
+export { DiffDOM, nodeToObj, stringToObj } from "./diffDOM/index"
+export { TraceLogger } from "./TraceLogger"

data/lib/clapton/javascripts/node_modules/diff-dom/tsconfig.json

@@ -0,0 +1,103 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    //"target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    //"module": "commonjs",                                /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    "declarationDir": "dts",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    //"strict": true,                                      /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+  }
+}

data/lib/clapton/javascripts/rollup.config.mjs

@@ -7,8 +7,23 @@ export default [
     input: 'src/components.ts',
     output: {
       file: 'dist/components.js',
-      format: 'iife',
-      name: 'Clapton'
+      format: 'esm'
+    },
+    plugins: [
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        sourceMap: false
+      })
+    ]
+  },
+  {
+    input: 'src/components-for-test.ts',
+    output: {
+      file: 'dist/components-for-test.js',
+      format: "iife",
+      name: "Clapton"
     },
     plugins: [
       resolve(),

data/lib/clapton/javascripts/src/actions/handle-action.ts

@@ -1,7 +1,12 @@
 import { claptonChannel } from "../channel/clapton-channel";
 
 export const handleAction = async (target: HTMLElement, stateName: string, fn: string) => {
-  const targetComponent = target.closest(`[data-component="${stateName.replace("State", "Component")}"]`) as HTMLElement;
+  let targetComponent = target;
+  if (target.dataset.component === stateName.replace("State", "Component")) {
+    targetComponent = target
+  } else {
+    targetComponent = target.closest(`[data-component="${stateName.replace("State", "Component")}"]`) as HTMLElement;
+  }
   if (!targetComponent) return;
   const component = target.closest(`[data-component]`) as HTMLElement;
   const attribute = target.getAttribute("data-attribute");

data/lib/clapton/javascripts/src/actions/initialize-actions.ts

@@ -14,6 +14,17 @@ const initializeActionsForElement = (element: HTMLElement) => {
     const { eventType, componentName, stateName, fnName, bounceTime } = splitActionAttribute(action);
     if (!eventType || !componentName || !fnName) return;
 
+    if (eventType === "render") {
+      const interval = setInterval(() => {
+        if ((window as any).actionCableConnected === true) {
+          handleAction(element, stateName, fnName);
+          clearInterval(interval);
+        }
+      }, 10);
+      element.setAttribute("data-render-event-handler", "true");
+      return;
+    }
+
     if (bounceTime > 0) {
       element.addEventListener(eventType, debounce((event) => 
         handleAction(event.target as HTMLElement, stateName, fnName), bounceTime)

data/lib/clapton/javascripts/src/channel/clapton-channel.js

@@ -1,24 +1,28 @@
 import morphdom from "morphdom"
 import { createConsumer } from "@rails/actioncable"
 import { initializeActions } from "../actions/initialize-actions.ts"
-
+import { initializeInputs } from "../inputs/initialize-inputs.ts"
 const consumer = createConsumer()
 
 export const claptonChannel = consumer.subscriptions.create("Clapton::ClaptonChannel", {
-  connected() {},
+  connected() {
+    window.actionCableConnected = true;
+  },
 
   disconnected() {},
 
-  received(response) {
+  async received(response) {
     const { data, errors } = response;
     const component = document.querySelector(`[data-id="${data.component.id}"]`)
-    const instance = new window[data.component.name](data.state, data.component.id, errors);
+    const module = await import(`${data.component.name}`);
+    const instance = new module[data.component.name](data.state, data.component.id, errors);
     morphdom(component, instance.render, {
       onBeforeElUpdated: (_fromEl, toEl) => {
         toEl.setAttribute("data-set-event-handler", "true");
         return true;
       }
     });
+
     initializeInputs();
     initializeActions();
   }