This is a collection of reusable HTML custom elements (WebComponents) for Dnn.
A demo site is available as a playground for all current components, along with documentation.
Stencil is a compiler for building fast web apps using Web Components.
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
npm install @dnncommunity/dnn-elements
yarn add @dnncommunity/dnn-elements
npm install @dnncommunity/dnn-elements-react
yarn add @dnncommunity/dnn-elements-react
Stay tuned - coming soon.
Usage of each component is documented within the library components folder along with code samples.
To help better handle breaking changes, and to provide advice regarding usage, a custom eslint plugin is included in this package. Some breaking changes have auto-fixes. Until we release v1.0.0, it is advisable to upgrade one minor version at a time, and if you use eslint or tslint, you can get some of the fixes applied automatically for you. We currently only support the flat config format, so you will need those set up:
eslintv8 (with the option to use the flat config type)eslintv9 (flat config is already mandatory)typescript-eslint(flat config is already mandatory) recommended if you use typescript
No additional package is needed. Just use the already installed @dnncommunity/dnn-elements and import the eslint-plugin. Then use it in your config:
import tseslint from 'typescript-eslint';
import eslint
85BE
from '@eslint/js';
+import dnnelements from '@dnncommunity/dnn-elements/eslint-plugin';
export default tseslint.config(
tseslint.configs.recommendedTypeChecked,
stencil.configs.flat.recommended,
+ dnnelements.configs.flat.recommended,
{
files: [
"src/**/*.{ts,tsx}",
],
},
{
ignores: [
"dist/",
"www/",
],
},
{
languageOptions: {
ecmaVersion: "latest",
sourceType: "module",
parserOptions: {
projectService: true,
project: './tsconfig.json',
}
}
},
)As we worked towards a v1.x.x release, we had several unavoidable breaking changes to handle along the way. The above eslint setup is highly recommended to help you with auto-fixes to handle those breaking changes smoothly, even with hundreds of usages. This means you need to follow a known upgrade path.
- From
<v0.24.0you should upgrade directly tov0.24.4and handle all the breaking changes (ideally usingeslint --fix). - From
v0.24.4-v0.25.1you should upgrade tov0.26.0and check manually if you used any of the removed CSS variables to adjust accordingly (see https://github.com/DNNCommunity/dnn-elements/pull/1252/files to spot the removals). Since this is CSS, there are noeslintrules to help you there. - From
v0.26.0onwards, you should upgrade tov0.27.1and handle all deprecations. - From
v0.27.1 - v1.x.xwe will add auto-fixes at each latest minor release. - From
v1.x.xwe will use semantic versioning, and you can simply upgrade one major version at a time. They will include auto-fixes in the same release where breaking changes happen.
This project is tested with BrowserStack