n6ai / minze Goto Github PK
View Code? Open in Web Editor NEWDead-simple JS framework for native web components.
Home Page: http://minze.dev
License: MIT License
Dead-simple JS framework for native web components.
Home Page: http://minze.dev
License: MIT License
In order to circumvent this bug I have to add:
onReady() {
this.rerender(true);
}
To detail the problem, the render is not forced when connectedCallback
happens and if the element has been rendered before it will not refresh the events. I think the render should be forced on connectedCallback
, I know it might be more costly in terms of rendering performance, but it would fix the requirement of having to manually trigger a forced rerender. This happens for all elements that get detached from the DOM tree and reattached at a later moment.
// my-element only has eventListeners (on click on whatever element)
const el = document.createElement('my-element');
const container = document.createElement('my-container');
document.body.appendChild(container);
container.appendChild(el);
// wait at least 1 callstack frame
container.removeChild(el);
// wait at least 1 callstack frame
container.appendChild(el);
/*
observe: event listeners attached through the tuples will not work anymore
*/
It applies everywhere as it is a logic issue.
npm
No response
After building the default project I've tried importing the components to a blank Angular project.
I can only see the type error in the npm module (after installing the project inside Angular), TypeScript is not complaining in the Minze project itself.
Might be a TypeScript version mismatch?
Build a default Minze project (npm run build) then import it to a local Angular project like so:
`
import Minze from 'minze';
import * as Elements from 'minze-angular' ;
Minze.defineAll(Elements);
`
and try to build Angular
System:
OS: macOS 12.3.1
CPU: (8) x64 Apple M1 Pro
Memory: 90.57 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.3/bin/npm
Browsers:
Chrome: 100.0.4896.127
Safari: 15.4
npmPackages:
minze: ^1.0.3 => 1.0.3
npm
`Error: node_modules/minze/dist/module.d.ts:236:5 - error TS2416: Property 'eventListeners' in type 'MinzeElement' is not assignable to the same property in base type 'HTMLElement'.
Type 'EventListeners | undefined' is not assignable to type '((eventName?: string | undefined) => EventListenerOrEventListenerObject[]) | undefined'.
Type 'EventListeners' is not assignable to type '(eventName?: string | undefined) => EventListenerOrEventListenerObject[]'.
Type 'readonly MinzeEvent[]' provides no match for the signature '(eventName?: string | undefined): EventListenerOrEventListenerObject[]'.
236 eventListeners?: EventListeners;
~~~~~~~~~~~~~~`
Node version 16 and 18.
Error: ENOENT: no such file or directory, scandir '.../.npm/_npx/[id]/node_modules/create-minze/template-ts'
at Object.readdirSync (node:fs:1451:3)
at run (.../.npm/_npx/[id]/node_modules/create-minze/index.js:146:20)
... {
errno: -2
syscall: 'scandir',
code: 'ENOENT',
path: '.../.npm/_npx/[id]/node_modules/create-minze/template-ts'
}
run npm init minze@latest ./my-project
System:
OS: Linux 6.2 Pop!_OS 22.04 LTS
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 42.47 GB / 62.58 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
npm: 9.1.1 - ~/.nvm/versions/node/v18.12.0/bin/npm
Browsers:
Brave Browser: 114.1.52.126
Chrome: 114.0.5735.133
Firefox: 114.0.1
### Used Package Manager
npm
### Logs
_No response_
### Validations
- [X] Follow our [Code of Conduct](https://github.com/n6ai/minze/blob/main/.github/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/n6ai/minze/blob/main/.github/CONTRIBUTING.md).
- [X] Read the [docs](https://minze.dev/guide).
- [X] Check that there isn't [already an issue](https://github.com/n6ai/minze/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/n6ai/minze/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Would be nice if there was any kind of code split for the custom elements, to lazyload them
import('./lib/minze-code').then(({MinzeCode}) => {
Minze.define('minze-code',MinzeCode);
});
No response
No response
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@microsoft/api-extractor
, @playwright/test
, @types/jest
, @types/react
, @types/react-dom
, @typescript-eslint/eslint-plugin
, @typescript-eslint/parser
, @vitejs/plugin-react
, @vitejs/plugin-vue
, eslint
, jest
, minimist
, prettier
, rollup-plugin-license
, simple-git-hooks
, typescript
, vite
, vitepress
, vue
).github/workflows/ci-docs.yml
actions/checkout v3
actions/setup-node v3
crazy-max/ghaction-github-pages v3
.github/workflows/ci-release.yml
actions/checkout v3
actions/setup-node v3
actions/checkout v3
actions/setup-node v3
actions/checkout v3
softprops/action-gh-release v1
actions/checkout v3
actions/setup-node v3
.github/workflows/issue-close-require.yml
actions-cool/issues-helper v3
.github/workflows/lock-closed-issues.yml
dessant/lock-threads v3
package.json
@types/node ^17.0.4
@typescript-eslint/eslint-plugin ^5.38.1
@typescript-eslint/parser ^5.38.1
eslint ^8.24.0
lint-staged ^13.0.3
npm-run-all ^4.1.5
prettier 2.7.1
simple-git-hooks ^2.8.0
standard-version ^9.3.2
vitepress ^1.0.0-alpha.19
wait-on ^6.0.1
packages/create-minze/package.json
kolorist ^1.6.0
minimist ^1.2.6
prompts ^2.4.2
packages/create-minze/template-js/package.json
minze ^1.0.3
@rollup/plugin-node-resolve ^14.1.0
rollup ^2.79.1
rollup-plugin-license ^2.8.1
rollup-plugin-terser ^7.0.2
vite ^3.1.4
packages/create-minze/template-ts/package.json
minze ^1.0.3
@microsoft/api-extractor ^7.32.0
@rollup/plugin-node-resolve ^14.1.0
@rollup/plugin-typescript ^8.5.0
rimraf ^3.0.2
rollup ^2.79.1
rollup-plugin-license ^2.8.1
rollup-plugin-terser ^7.0.2
typescript ^4.8.4
vite ^3.1.4
packages/minze-elements/package.json
@microsoft/api-extractor ^7.32.0
@rollup/plugin-node-resolve ^14.1.0
@rollup/plugin-typescript ^8.5.0
rimraf ^3.0.2
rollup ^2.79.1
rollup-plugin-license ^2.8.1
rollup-plugin-terser ^7.0.2
typescript ^4.8.4
packages/minze/package.json
@microsoft/api-extractor ^7.32.0
@rollup/plugin-replace ^4.0.0
@rollup/plugin-typescript ^8.5.0
rimraf ^3.0.2
rollup ^2.79.1
rollup-plugin-license ^2.8.1
rollup-plugin-terser ^7.0.2
typescript ^4.8.4
packages/playground/package.json
@microsoft/api-extractor ^7.32.0
@rollup/plugin-node-resolve ^14.1.0
@rollup/plugin-typescript ^8.5.0
rimraf ^3.0.2
rollup ^2.79.1
rollup-plugin-license ^2.8.1
rollup-plugin-terser ^7.0.2
typescript ^4.8.4
vite ^3.0.9
packages/tests/e2e/minze-element/package.json
packages/tests/e2e/minze/package.json
packages/tests/integration/react/package.json
react ^18.2.0
react-dom ^18.2.0
@types/react ^18.0.21
@types/react-dom ^18.0.6
@vitejs/plugin-react ^2.1.0
packages/tests/integration/vue/package.json
vue ^3.2.40
@vitejs/plugin-vue ^3.0.3
packages/tests/package.json
@playwright/test ^1.26.1
@types/jest ^29.1.1
cross-env ^7.0.3
jest ^29.1.2
ts-jest ^29.0.3
ts-node ^10.9.1
typescript ^4.8.4
vite ^3.0.9
Running npm run build on a freshly installed minze project results in the following error:
[!] (plugin typescript) Error: @rollup/plugin-typescript: Could not find module 'tslib', which is required by this plugin. Is it installed? Error: @rollup/plugin-typescript: Could not find module 'tslib', which is required by this plugin. Is it installed? at error (/Users/guynesher/work/minze/minze-angular/node_modules/rollup/dist/shared/rollup.js:198:30) at throwPluginError (/Users/guynesher/work/minze/minze-angular/node_modules/rollup/dist/shared/rollup.js:21891:12) at Object.error (/Users/guynesher/work/minze/minze-angular/node_modules/rollup/dist/shared/rollup.js:22614:20) at preflight (/Users/guynesher/work/minze/minze-angular/node_modules/@rollup/plugin-typescript/dist/index.js:496:17) at Object.buildStart (/Users/guynesher/work/minze/minze-angular/node_modules/@rollup/plugin-typescript/dist/index.js:737:13) at /Users/guynesher/work/minze/minze-angular/node_modules/rollup/dist/shared/rollup.js:22823:37 at async Promise.all (index 1) at /Users/guynesher/work/minze/minze-angular/node_modules/rollup/dist/shared/rollup.js:23611:13 at catchUnfinishedHookActions (/Users/guynesher/work/minze/minze-angular/node_modules/rollup/dist/shared/rollup.js:23121:20) at rollupInternal (/Users/guynesher/work/minze/minze-angular/node_modules/rollup/dist/shared/rollup.js:23609:5)
Error happens when using Node 14.x.x, upgrading to 16.x.x fixes the problem.
For Node 14.x.x error can be fixed by installing tslib.
I'm happy to open a PR for this, but since it only affects older node versions I wasn't sure it's needed and we can alternatively just mention it somewhere in the docs?
System:
OS: macOS 12.3.1
CPU: (8) x64 Apple M1 Pro
Memory: 67.73 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.3/bin/npm
Browsers:
Chrome: 100.0.4896.127
Safari: 15.4
npmPackages:
minze: ^1.0.2 => 1.0.3
npm
No response
Clicking the template literals link returns a 404 error.
The correct link is below:
https://marketplace.visualstudio.com/items?itemName=julienetie.vscode-template-literals
The broken link is in the documentation at the following page:
https://minze.dev/guide/advanced-syntax-highlighting.html
Not relevant in this case as it's a bug in the documentation, not the main project.
npm
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.