* @param {ComponentConstructorOptions & { * component: any; * }} options
(options)
| 78 | * }} options |
| 79 | */ |
| 80 | constructor(options) { |
| 81 | var sources = new Map(); |
| 82 | |
| 83 | /** |
| 84 | * @param {string | symbol} key |
| 85 | * @param {unknown} value |
| 86 | */ |
| 87 | var add_source = (key, value) => { |
| 88 | var s = mutable_source(value, false, false); |
| 89 | sources.set(key, s); |
| 90 | return s; |
| 91 | }; |
| 92 | |
| 93 | // Replicate coarse-grained props through a proxy that has a version source for |
| 94 | // each property, which is incremented on updates to the property itself. Do not |
| 95 | // use our $state proxy because that one has fine-grained reactivity. |
| 96 | const props = new Proxy( |
| 97 | { ...(options.props || {}), $$events: {} }, |
| 98 | { |
| 99 | get(target, prop) { |
| 100 | return get(sources.get(prop) ?? add_source(prop, Reflect.get(target, prop))); |
| 101 | }, |
| 102 | has(target, prop) { |
| 103 | // Necessary to not throw "invalid binding" validation errors on the component side |
| 104 | if (prop === LEGACY_PROPS) return true; |
| 105 | |
| 106 | get(sources.get(prop) ?? add_source(prop, Reflect.get(target, prop))); |
| 107 | return Reflect.has(target, prop); |
| 108 | }, |
| 109 | set(target, prop, value) { |
| 110 | set(sources.get(prop) ?? add_source(prop, value), value); |
| 111 | return Reflect.set(target, prop, value); |
| 112 | } |
| 113 | } |
| 114 | ); |
| 115 | |
| 116 | this.#instance = (options.hydrate ? hydrate : mount)(options.component, { |
| 117 | target: options.target, |
| 118 | anchor: options.anchor, |
| 119 | props, |
| 120 | context: options.context, |
| 121 | intro: options.intro ?? false, |
| 122 | recover: options.recover, |
| 123 | transformError: options.transformError |
| 124 | }); |
| 125 | |
| 126 | // We don't flushSync for custom element wrappers or if the user doesn't want it, |
| 127 | // or if we're in async mode since `flushSync()` will fail |
| 128 | if (!async_mode_flag && (!options?.props?.$$host || options.sync === false)) { |
| 129 | flushSync(); |
| 130 | } |
| 131 | |
| 132 | this.#events = props.$$events; |
| 133 | |
| 134 | for (const key of Object.keys(this.#instance)) { |
| 135 | if (key === '$set' || key === '$destroy' || key === '$on') continue; |
| 136 | define_property(this, key, { |
| 137 | get() { |