or --> TEXT)
790 | if (morphedNodeType === ELEMENT_NODE) {
791 | if (toNodeType === ELEMENT_NODE) {
792 | if (!compareNodeNames(fromNode, toNode)) {
793 | onNodeDiscarded(fromNode);
794 | morphedNode = moveChildren(fromNode, createElementNS(toNode.nodeName, toNode.namespaceURI));
795 | }
796 | } else {
797 | // Going from an element node to a text node
798 | morphedNode = toNode;
799 | }
800 | } else if (morphedNodeType === TEXT_NODE || morphedNodeType === COMMENT_NODE) { // Text or comment node
801 | if (toNodeType === morphedNodeType) {
802 | if (morphedNode.nodeValue !== toNode.nodeValue) {
803 | morphedNode.nodeValue = toNode.nodeValue;
804 | }
805 |
806 | return morphedNode;
807 | } else {
808 | // Text node to something else
809 | morphedNode = toNode;
810 | }
811 | }
812 | }
813 |
814 | if (morphedNode === toNode) {
815 | // The "to node" was not compatible with the "from node" so we had to
816 | // toss out the "from node" and use the "to node"
817 | onNodeDiscarded(fromNode);
818 | } else {
819 | if (toNode.isSameNode && toNode.isSameNode(morphedNode)) {
820 | return;
821 | }
822 |
823 | morphEl(morphedNode, toNode, childrenOnly);
824 |
825 | // We now need to loop over any keyed nodes that might need to be
826 | // removed. We only do the removal if we know that the keyed node
827 | // never found a match. When a keyed node is matched up we remove
828 | // it out of fromNodesLookup and we use fromNodesLookup to determine
829 | // if a keyed node has been matched up or not
830 | if (keyedRemovalList) {
831 | for (var i = 0, len = keyedRemovalList.length; i < len; i++) {
832 | var elToRemove = fromNodesLookup[keyedRemovalList[i]];
833 | if (elToRemove) {
834 | removeNode(elToRemove, elToRemove.parentNode, false);
835 | }
836 | }
837 | }
838 | }
839 |
840 | if (!childrenOnly && morphedNode !== fromNode && fromNode.parentNode) {
841 | if (morphedNode.actualize) {
842 | morphedNode = morphedNode.actualize(fromNode.ownerDocument || doc);
843 | }
844 | // If we had to swap out the from node with a new node because the old
845 | // node was not compatible with the target node then we need to
846 | // replace the old DOM node in the original DOM tree. This is only
847 | // possible if the original DOM node was part of a DOM tree which
848 | // we know is the case if it has a parent node.
849 | fromNode.parentNode.replaceChild(morphedNode, fromNode);
850 | }
851 |
852 | return morphedNode;
853 | };
854 | }
855 |
856 | var morphdom = morphdomFactory(morphAttrs);
857 |
858 | module.exports = morphdom;
859 |
860 | }, {}],
861 | 4: [function (require, module, exports) {
862 | const morphdom = require("morphdom")
863 | const { defaultEvents, ...otherEvents } = require("./events")
864 | const { SD, FOR } = require("./types")
865 |
866 | const { Assets } = require("./assets")
867 |
868 |
869 |
870 | const morphdomHooks = (socket, handlers, userHooks) => ({
871 | getNodeKey: function (node) {
872 | return node.id;
873 | },
874 | onBeforeNodeAdded: function (node) {
875 | return node;
876 | },
877 | onNodeAdded: function (node) {
878 |
879 | userHooks.onNodeAdded && userHooks.onNodeAdded(node)
880 |
881 | for (const { applyWhen, on, event, handler }
882 | of handlers) {
883 |
884 | if (!applyWhen(node)) {
885 | continue
886 | }
887 |
888 | if (!node.hasAttribute(event) && !node.hasAttribute(":" + event)) {
889 | continue
890 | }
891 |
892 |
893 | let eventName = node.getAttribute(event)
894 | if (eventName === null) {
895 | eventName = node.getAttribute(":" + event)
896 | }
897 |
898 | node.addEventListener(on, (event) => {
899 | let payload = handler(event, eventName)
900 | if (payload === null) {
901 | return
902 | }
903 |
904 |
905 | for (const attribute of node.attributes) {
906 | if (attribute.name.startsWith(":value-")) {
907 | const key = attribute.name.slice(":value-".length)
908 | payload = { ...payload, [key]: attribute.value.trim() }
909 | }
910 | }
911 |
912 | socket.ws.send(JSON.stringify(payload, null, 0))
913 | })
914 | }
915 |
916 | },
917 | onBeforeElUpdated: function (fromEl, toEl) {
918 | return true;
919 | },
920 | onElUpdated: function (el) {
921 |
922 | },
923 | onBeforeNodeDiscarded: function (node) {
924 | return true;
925 | },
926 | onNodeDiscarded: function (node) {
927 | // note: all event-listeners should be removed automatically, as no one holds reference of the node
928 | // see: https://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
929 | },
930 | onBeforeElChildrenUpdated: function (fromEl, toEl) {
931 | return true;
932 | },
933 | childrenOnly: false
934 | })
935 |
936 | class PulpSocket {
937 |
938 | constructor(mountID, wsPath, config) {
939 | const events = config.events || []
940 | const debug = config.debug || false
941 | const hooks = config.hooks || {}
942 |
943 | this.lastRoute = null
944 | let cachedSD = null;
945 | let cachedAssets = null
946 |
947 | const mount = document.getElementById(mountID)
948 |
949 | if (!wsPath.startsWith("/")) {
950 | wsPath = "/" + wsPath
951 | }
952 |
953 | this.ws = new WebSocket(new URL(wsPath, "ws://" + document.location.host).href)
954 |
955 | Object.assign(globalThis, { PulpSocket: this })
956 |
957 | const mHooks = morphdomHooks({ ws: this.ws }, [...Object.values(defaultEvents), ...events], hooks)
958 |
959 |
960 | this.ws.onopen = (it) => {
961 | debug && console.log(`socket for ${mountID} connected: `, it)
962 | }
963 |
964 | this.ws.onmessage = ({ data }) => {
965 | data.text()
966 | .then(x => [JSON.parse(x), x])
967 | .then(([messageJSON, raw]) => {
968 |
969 | debug && console.log("got patch: ", raw, messageJSON)
970 |
971 | if (messageJSON.assets !== undefined) {
972 | const { assets } = messageJSON
973 | debug && console.log(assets)
974 | if (cachedAssets == null) {
975 | cachedAssets = new Assets(assets)
976 | } else {
977 | cachedAssets = cachedAssets.patch(assets)
978 | }
979 |
980 | Object.assign(globalThis, { cachedAssets })
981 |
982 | const { route } = assets
983 | history.pushState({}, null, route)
984 | this.lastRoute = route
985 |
986 |
987 | if (this.onassets !== undefined) {
988 | this.onassets(cachedAssets.cache)
989 | }
990 | }
991 |
992 |
993 | if (messageJSON.html !== undefined) {
994 | if (cachedSD === null) { // has not mounted yet => no patching
995 | cachedSD = new SD(messageJSON.html)
996 | } else {
997 | const patches = messageJSON.html
998 | cachedSD = cachedSD.patch(patches)
999 | }
1000 | }
1001 |
1002 | const temp = document.createElement("div")
1003 | temp.id = mountID
1004 | temp.innerHTML = cachedSD.render()
1005 | morphdom(mount, temp, mHooks)
1006 |
1007 | }).catch(console.error)
1008 | }
1009 |
1010 |
1011 | const self = this
1012 | window.addEventListener("popstate", (e) => {
1013 | self.ws.send(JSON.stringify({ from: this.lastRoute === null ? "" : this.lastRoute, to: new URL(document.location.href).pathname }, null, 0))
1014 | })
1015 | }
1016 | }
1017 |
1018 |
1019 | Object.assign(globalThis, { Pulp: { PulpSocket, events: { ...defaultEvents, ...otherEvents } } })
1020 |
1021 | module.exports = { PulpSocket, events: { ...defaultEvents, ...otherEvents } }
1022 | }, { "./assets": 1, "./events": 2, "./types": 5, "morphdom": 3 }],
1023 | 5: [function (require, module, exports) {
1024 | const set = x => x !== undefined
1025 |
1026 |
1027 | function classify(it) {
1028 |
1029 |
1030 | if (SD.detect(it)) {
1031 | return new SD(it)
1032 | }
1033 |
1034 | if (IF.detect(it)) {
1035 | return new IF(it)
1036 | }
1037 |
1038 | if (FOR.detect(it)) {
1039 | return new FOR(it)
1040 | }
1041 |
1042 |
1043 | return it
1044 |
1045 | }
1046 | class SD {
1047 | static detect = (it) => set(it.s) && set(it.d)
1048 |
1049 | static render({ s, d }) {
1050 | let out = ""
1051 |
1052 | for (let i = 0; i < s.length; i++) {
1053 | out += s[i]
1054 |
1055 | // if (!d) {
1056 | // continue
1057 | // }
1058 |
1059 | if (i < d.length) {
1060 | out += set(d[i].render) ? d[i].render() : d[i]
1061 | }
1062 | }
1063 |
1064 | return out
1065 | }
1066 |
1067 | static patchListOfDynamics(list, patches) {
1068 | let copy = [...list]
1069 |
1070 | Object.keys(patches).forEach(key => {
1071 | if (copy[key] !== null && copy[key] !== undefined) {
1072 | if (set(copy[key].patch)) {
1073 | copy[key] = copy[key].patch(patches[key])
1074 | return
1075 | }
1076 | }
1077 |
1078 |
1079 | copy[key] = patches[key]
1080 | })
1081 |
1082 | return copy
1083 | }
1084 |
1085 | constructor({ s, d }) {
1086 | this.s = s
1087 | this.d = d.map(classify)
1088 | }
1089 |
1090 | render() {
1091 | return SD.render(this)
1092 | }
1093 |
1094 | patch(patches) {
1095 | return new SD({ s: this.s, d: SD.patchListOfDynamics(this.d, patches) })
1096 | }
1097 | }
1098 |
1099 |
1100 | class IF {
1101 | static detect = (it) => set(it.c) || set(it.f) || set(it.t)
1102 |
1103 | type_ = "IF"
1104 |
1105 | constructor({ c, t, f }) {
1106 | this.c = c
1107 | this.t = new SD(t)
1108 | this.f = new SD(f)
1109 | }
1110 |
1111 | render() { return SD.render(this.c ? this.t : this.f) }
1112 |
1113 | patch(patches) {
1114 | return new IF({
1115 | c: set(patches.c) ? patches.c : this.c,
1116 | t: set(patches.t) ? new SD(this.t).patch(patches.t) : this.t,
1117 | f: set(patches.f) ? new SD(this.f).patch(patches.f) : this.f,
1118 | })
1119 | }
1120 | }
1121 |
1122 |
1123 | class FOR {
1124 | // static strategy = {
1125 | // append: 0,
1126 | // prepend: 1,
1127 | // }
1128 |
1129 | static detect = (it) => set(it.ds) /* holds true for both the initial server push and the patches*/
1130 |
1131 | constructor({ /*strategy,*/ ds, s }) {
1132 | // this.strategy = strategy
1133 | this.s = s
1134 | this.ds = Object.keys(ds).reduce((acc, key) => ({ ...acc, [key]: ds[key].map(classify) }), {})
1135 | }
1136 |
1137 | render() {
1138 | let out = ""
1139 |
1140 | Object.values(this.ds).forEach(dynamic => {
1141 | out += SD.render({ s: this.s, d: dynamic })
1142 | })
1143 |
1144 | return out
1145 | }
1146 |
1147 | patch(patches) {
1148 | let newDS = { ...this.ds }
1149 |
1150 | for (const key in patches.ds) {
1151 | if (patches.ds[key] === null) { // this element should be deleted
1152 | delete newDS[key]
1153 | } else if (set(this.ds[key])) { // old elemenent. patch it!
1154 | newDS[key] = SD.patchListOfDynamics(this.ds[key], patches.ds[key])
1155 | } else { // new element
1156 | newDS[key] = patches.ds[key].map(classify)
1157 | }
1158 | }
1159 |
1160 | return new FOR({ ...this, ds: newDS })
1161 | }
1162 |
1163 | }
1164 |
1165 |
1166 |
1167 |
1168 |
1169 | module.exports = { SD, FOR, IF }
1170 | }, {}]
1171 | }, {}, [4]);
--------------------------------------------------------------------------------