@htmlplus/element 0.8.3 → 0.8.5

package/client/decorators/element.js

@@ -1,4 +1,4 @@
-import { camelCase, paramCase } from 'change-case';
+import { camelCase, kebabCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
 import { call, getConfig, getMembers, getNamespace, getTag, isServer, request, toProperty } from '../utils/index.js';
 export function Element() {
@@ -26,7 +26,7 @@ export function Element() {
             static get observedAttributes() {
                 return Object.keys(members)
                     .filter((key) => members[key].type != CONSTANTS.TYPE_FUNCTION)
-                    .map((key) => paramCase(key));
+                    .map((key) => kebabCase(key));
             }
             adoptedCallback() {
                 call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);

package/client/decorators/event.js

@@ -1,4 +1,4 @@
-import { paramCase, pascalCase } from 'change-case';
+import { kebabCase, pascalCase } from 'change-case';
 import { defineProperty, getFramework, host } from '../utils/index.js';
 export function Event(options = {}) {
     return function (target, propertyKey) {
@@ -11,11 +11,16 @@ export function Event(options = {}) {
                     (_a = options.bubbles) !== null && _a !== void 0 ? _a : (options.bubbles = false);
                     let name = options.name || String(propertyKey);
                     switch (framework) {
+                        case 'qwik':
+                        case 'solid':
+                            name = pascalCase(name).toLowerCase();
+                            break;
+                        case 'preact':
                         case 'react':
                             name = pascalCase(name);
                             break;
                         default:
-                            name = paramCase(name);
+                            name = kebabCase(name);
                             break;
                     }
                     const event = new CustomEvent(name, Object.assign(Object.assign({}, options), { detail }));

package/client/utils/classes.js

@@ -1,4 +1,4 @@
-import { paramCase } from 'change-case';
+import { kebabCase } from 'change-case';
 import { typeOf } from './typeOf.js';
 export const classes = (input, smart) => {
     const result = [];
@@ -16,7 +16,7 @@ export const classes = (input, smart) => {
             const keys = Object.keys(input);
             for (const key of keys) {
                 const value = input[key];
-                const name = paramCase(key);
+                const name = kebabCase(key);
                 const type = typeOf(value);
                 if (!smart) {
                     if (!value)

package/client/utils/getFramework.js

@@ -1,12 +1,16 @@
 export const getFramework = (target) => {
+    if ('_qc_' in target)
+        return 'qwik';
+    if ('_$owner' in target)
+        return 'solid';
+    if ('__svelte_meta' in target)
+        return 'svelte';
+    if ('__vnode' in target)
+        return 'vue';
     const keys = Object.keys(target);
-    const has = (key) => keys.some((key) => key.startsWith(key));
+    const has = (input) => keys.some((key) => key.startsWith(input));
     if (has('__zone_symbol__'))
         return 'angular';
     if (has('__react'))
         return 'react';
-    if (has('__svelte'))
-        return 'svelte';
-    if (has('__vnode'))
-        return 'vue';
 };

package/client/utils/styles.js

@@ -1,4 +1,4 @@
-import { paramCase } from 'change-case';
+import { kebabCase } from 'change-case';
 import { typeOf } from './typeOf.js';
 export const styles = (input) => {
     switch (typeOf(input)) {
@@ -7,7 +7,7 @@ export const styles = (input) => {
         case 'object':
             return Object.keys(input)
                 .filter((key) => input[key] !== undefined && input[key] !== null)
-                .map((key) => `${key.startsWith('--') ? '--' : ''}${paramCase(key)}: ${input[key]}`)
+                .map((key) => `${key.startsWith('--') ? '--' : ''}${kebabCase(key)}: ${input[key]}`)
                 .join('; ');
         case 'string':
             return input;

package/client/utils/updateAttribute.js

@@ -1,6 +1,6 @@
-import { paramCase } from 'change-case';
+import { kebabCase } from 'change-case';
 export const updateAttribute = (node, key, value) => {
-    const name = paramCase(key);
+    const name = kebabCase(key);
     if ([undefined, null, false].includes(value))
         return node.removeAttribute(name);
     node.setAttribute(name, value === true ? '' : value);

package/compiler/plugins/customElement.js

@@ -1,6 +1,6 @@
 import template from '@babel/template';
 import t from '@babel/types';
-import { camelCase, paramCase, pascalCase } from 'change-case';
+import { camelCase, kebabCase, pascalCase } from 'change-case';
 import * as CONSTANTS from '../../constants/index.js';
 import { addDependency, getType, print, toEventTypeAnnotation, toPropertySignature, visitor } from '../utils/index.js';
 export const CUSTOM_ELEMENT_OPTIONS = {
@@ -291,13 +291,13 @@ export const customElement = (options) => {
                     const attributeJSX = [
                         ...context.classProperties.map((property) => {
                             return toPropertySignature(property, {
-                                keyTransformer: (key) => paramCase(key)
+                                keyTransformer: (key) => kebabCase(key)
                             });
                         }),
                         ...context.classEvents.map((event) => {
                             return toPropertySignature(event, {
                                 optional: true,
-                                keyTransformer: (key) => 'on' + paramCase(key),
+                                keyTransformer: (key) => camelCase('on-' + key),
                                 typeAnnotationTransformer: toEventTypeAnnotation
                             });
                         })

package/compiler/plugins/customElementReact/templates/package.json.hbs

@@ -15,7 +15,7 @@
   ],
   "dependencies": {
     "YOUR_CORE_PACKAGE_NAME": "latest",
-    "change-case": "^4.1.2"
+    "change-case": "^5.1.2"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^15.0.0",

package/compiler/plugins/customElementReact/templates/src/proxy.ts.hbs

@@ -3,7 +3,7 @@
  **************************************************/
 import React from 'react';
 
-import { camelCase, paramCase, pascalCase } from 'change-case';
+import { camelCase, kebabCase, pascalCase } from 'change-case';
 
 export type Rename<T, R extends { [K in keyof R]: K extends keyof T ? PropertyKey : 'Error: key not in T' }> = {
   [P in keyof T as P extends keyof R ? R[P] : P]: T[P];
@@ -107,7 +107,7 @@ const getProps = <ElementType>(ref: React.Ref<ElementType>, props: PropsType<Ele
     } else if (extra.props?.includes(name)) {
       if (!isPrimitive(value)) return;
 
-      (result as any)[paramCase(name)] = value;
+      (result as any)[kebabCase(name)] = value;
     } else {
       (result as any)[name] = value;
     }
@@ -163,10 +163,10 @@ const setEvent = (element: Element, name: string, handler: EventHandlerType) =>
 
   const previous = events[name];
 
-  previous && element.removeEventListener(paramCase(name), previous);
+  previous && element.removeEventListener(pascalCase(name), previous);
 
   element.addEventListener(
-    paramCase(name),
+    pascalCase(name),
     (events[name] = function callback(event: Event) {
       handler && handler.call(this, event);
     })
@@ -201,7 +201,7 @@ const setProps = <ElementType>(element: ElementType, props: PropsType<ElementTyp
       setEvent(element, event, value);
     } else if (extra.props?.includes(name)) {
       if (isPrimitive(value)) {
-        element.setAttribute(paramCase(name), value);
+        element.setAttribute(kebabCase(name), value);
       } else {
         (element as any)[name] = value;
       }
@@ -248,7 +248,7 @@ export const proxy = <ElementType, PropType>(
       Object.keys(events).forEach((name) => {
         const handler = events[name];
 
-        (this.element as any).removeEventListener(paramCase(name), handler);
+        (this.element as any).removeEventListener(pascalCase(name), handler);
       });
 
       delete (this.element as any)['$events'];

package/compiler/plugins/document.js

@@ -1,4 +1,4 @@
-import { capitalCase, paramCase } from 'change-case';
+import { capitalCase, kebabCase } from 'change-case';
 import fs from 'fs-extra';
 import glob from 'glob';
 import path from 'path';
@@ -122,7 +122,7 @@ export const document = (options) => {
             const parts = getTags(context.class, 'part').map((tag) => parseTag(tag));
             const properties = context.classProperties.map((property) => {
                 var _a, _b, _c;
-                const attribute = paramCase(property.key['name']);
+                const attribute = kebabCase(property.key['name']);
                 const deprecated = hasTag(property, 'deprecated');
                 const description = (_a = getTags(property).find((tag) => !tag.key)) === null || _a === void 0 ? void 0 : _a.value;
                 const experimental = hasTag(property, 'experimental');

package/compiler/plugins/extract.js

@@ -1,5 +1,5 @@
 import t from '@babel/types';
-import { paramCase } from 'change-case';
+import { kebabCase } from 'change-case';
 import path from 'path';
 import * as CONSTANTS from '../../constants/index.js';
 import { hasDecorator, visitor } from '../utils/index.js';
@@ -38,7 +38,7 @@ export const extract = () => {
         context.fileExtension = path.extname(context.filePath);
         context.fileName = path.basename(context.filePath, context.fileExtension);
         context.className = (_b = (_a = context.class) === null || _a === void 0 ? void 0 : _a.id) === null || _b === void 0 ? void 0 : _b.name;
-        context.componentKey = paramCase(context.className);
+        context.componentKey = kebabCase(context.className);
         context.classEvents = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_EVENT));
         context.classMethods = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_METHOD));
         context.classProperties = (context.classMembers || []).filter((member) => hasDecorator(member, CONSTANTS.DECORATOR_PROPERTY));

package/compiler/plugins/visualStudioCode.js

@@ -1,4 +1,4 @@
-import { paramCase } from 'change-case';
+import { kebabCase } from 'change-case';
 import fs from 'fs-extra';
 import path from 'path';
 import { getTags, getType, print } from '../utils/index.js';
@@ -31,7 +31,7 @@ export const visualStudioCode = (options) => {
             };
             for (const property of context.classProperties || []) {
                 const attribute = {
-                    name: paramCase(property.key['name']),
+                    name: kebabCase(property.key['name']),
                     description: (_c = getTags(property).find((tag) => !tag.key)) === null || _c === void 0 ? void 0 : _c.value,
                     values: []
                 };

package/compiler/plugins/webTypes.js

@@ -1,4 +1,4 @@
-import { paramCase } from 'change-case';
+import { kebabCase } from 'change-case';
 import fs from 'fs-extra';
 import path from 'path';
 import { getInitializer, getTags, getType, hasTag, parseTag, print } from '../utils/index.js';
@@ -40,7 +40,7 @@ export const webTypes = (options) => {
             const attributes = (_a = context.classProperties) === null || _a === void 0 ? void 0 : _a.map((property) => {
                 var _a;
                 return Object.assign(common(property), {
-                    name: paramCase(property.key['name']),
+                    name: kebabCase(property.key['name']),
                     value: {
                         // kind: TODO
                         type: print(getType(context.directoryPath, context.fileAST, (_a = property.typeAnnotation) === null || _a === void 0 ? void 0 : _a['typeAnnotation']))
@@ -52,7 +52,7 @@ export const webTypes = (options) => {
             });
             const description = (_b = getTags(context.class).find((tag) => !tag.key)) === null || _b === void 0 ? void 0 : _b.value;
             const events = (_c = context.classEvents) === null || _c === void 0 ? void 0 : _c.map((event) => Object.assign(common(event), {
-                name: paramCase(event.key['name']) // TODO
+                name: kebabCase(event.key['name']) // TODO
                 // 'value': TODO
             }));
             const methods = (_d = context.classMethods) === null || _d === void 0 ? void 0 : _d.map((method) => Object.assign(common(method), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlplus/element",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "license": "MIT",
   "sideEffects": false,
   "author": "Masood Abdolian <m.abdolian@gmail.com>",
@@ -38,7 +38,7 @@
     "@babel/traverse": "^7.20.1",
     "@babel/types": "^7.20.2",
     "@types/node": "^18.11.9",
-    "change-case": "^4.1.2",
+    "change-case": "^5.1.2",
     "fast-glob": "^3.2.12",
     "fs-extra": "^10.1.0",
     "handlebars": "^4.7.7",