websymphony / websymphony.github.io

0 stars 1 forks source link

blog/how-to-inject-props-into-dynamically-rendered-components-via-slot-in-stenciljs/ #1

Open utterances-bot opened 1 year ago

utterances-bot commented 1 year ago

How to inject props into dynamically rendered components via slot in stenciljs - Amit Gaur

In this I explain how to pass props to components that are rendered dynamically in stencil js using Slot tag.

https://websymphony.net/blog/how-to-inject-props-into-dynamically-rendered-components-via-slot-in-stenciljs/

jackchoumine commented 1 year ago

nice post

jackchoumine commented 1 year ago

Hello, i use stencil to build a component lib, but the dist code is not miniflied.

this is my stencil.config.ts:

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'jack-ui',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
};

my package.json:

{
  "name": "jack-ui",
  "version": "0.0.1",
  "description": "Stencil Component Starter",
  "main": "dist/index.cjs.js",
  "module": "dist/index.js",
  "es2015": "dist/esm/index.mjs",
  "es2017": "dist/esm/index.mjs",
  "types": "dist/types/index.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "collection:main": "dist/collection/index.js",
  "unpkg": "dist/jack-ui/jack-ui.esm.js",
  "repository": {
    "type": "git",
    "url": "https://github.com/ionic-team/stencil-component-starter.git"
  },
  "files": [
    "dist/",
    "loader/"
  ],
  "scripts": {
    "build": "stencil build --docs --prod",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll",
    "g": "stencil generate"
  },
  "dependencies": {
    "@stencil/core": "^2.13.0",
    "countup.js": "^2.3.2"
  },
  "devDependencies": {
    "@types/jest": "^29.1.2",
    "jest": "^29.2.0",
    "jest-cli": "^29.2.0",
    "puppeteer": "^19.0.0"
  },
  "license": "MIT"
}

Could u give me some tips? how to minfly output code?