How to use componentName method in ladle

Best JavaScript code snippet using ladle

demo.js

Source: demo.js Github

copy

Full Screen

1/​/​ 用在组件文档里,展示所有 Icon2import React, { useState } from 'react';3import {4 Radio,5 Input,6 Affix,7 Space,8 Slider,9 Select,10 InputNumber,11 Button,12 Modal,13 Typography,14} from '@arco-design/​web-react';15import { IconCamera } from '@arco-design/​web-react/​icon';16import * as icons from '@arco-design/​web-react/​icon/​index.es.js';17import { IconClassifyModal } from './​classifyModal';18import { Tooltip } from '@arco-design/​web-react';19import { teaLog } from '@arco-design/​arco-site-utils';20import { EventMap } from '../​site/​src/​pages/​home/​utils/​eventMap';21const RadioGroup = Radio.Group;22const { Paragraph } = Typography;23const svgData = JSON.parse(24 '{"direction":{"outline":[{"name":"arrow-down","componentName":"IconArrowDown"},{"name":"arrow-fall","componentName":"IconArrowFall"},{"name":"arrow-left","componentName":"IconArrowLeft"},{"name":"arrow-right","componentName":"IconArrowRight"},{"name":"arrow-rise","componentName":"IconArrowRise"},{"name":"arrow-up","componentName":"IconArrowUp"},{"name":"caret-down","componentName":"IconCaretDown"},{"name":"caret-left","componentName":"IconCaretLeft"},{"name":"caret-right","componentName":"IconCaretRight"},{"name":"caret-up","componentName":"IconCaretUp"},{"name":"double-down","componentName":"IconDoubleDown"},{"name":"double-left","componentName":"IconDoubleLeft"},{"name":"double-right","componentName":"IconDoubleRight"},{"name":"double-up","componentName":"IconDoubleUp"},{"name":"down-circle","componentName":"IconDownCircle"},{"name":"down","componentName":"IconDown"},{"name":"drag-arrow","componentName":"IconDragArrow"},{"name":"expand","componentName":"IconExpand"},{"name":"left-circle","componentName":"IconLeftCircle"},{"name":"left","componentName":"IconLeft"},{"name":"menu-fold","componentName":"IconMenuFold"},{"name":"menu-unfold","componentName":"IconMenuUnfold"},{"name":"right-circle","componentName":"IconRightCircle"},{"name":"right","componentName":"IconRight"},{"name":"rotate-left","componentName":"IconRotateLeft"},{"name":"rotate-right","componentName":"IconRotateRight"},{"name":"shrink","componentName":"IconShrink"},{"name":"swap","componentName":"IconSwap"},{"name":"to-bottom","componentName":"IconToBottom"},{"name":"to-left","componentName":"IconToLeft"},{"name":"to-right","componentName":"IconToRight"},{"name":"to-top","componentName":"IconToTop"},{"name":"up-circle","componentName":"IconUpCircle"},{"name":"up","componentName":"IconUp"}]},"tips":{"fill":[{"name":"check-circle-fill","componentName":"IconCheckCircleFill"},{"name":"close-circle-fill","componentName":"IconCloseCircleFill"},{"name":"exclamation-circle-fill","componentName":"IconExclamationCircleFill"},{"name":"exclamation-polygon-fill","componentName":"IconExclamationPolygonFill"},{"name":"info-circle-fill","componentName":"IconInfoCircleFill"},{"name":"minus-circle-fill","componentName":"IconMinusCircleFill"},{"name":"plus-circle-fill","componentName":"IconPlusCircleFill"},{"name":"question-circle-fill","componentName":"IconQuestionCircleFill"}],"outline":[{"name":"check-circle","componentName":"IconCheckCircle"},{"name":"check-square","componentName":"IconCheckSquare"},{"name":"check","componentName":"IconCheck"},{"name":"clock-circle","componentName":"IconClockCircle"},{"name":"close-circle","componentName":"IconCloseCircle"},{"name":"close","componentName":"IconClose"},{"name":"exclamation-circle","componentName":"IconExclamationCircle"},{"name":"exclamation","componentName":"IconExclamation"},{"name":"info-circle","componentName":"IconInfoCircle"},{"name":"info","componentName":"IconInfo"},{"name":"minus-circle","componentName":"IconMinusCircle"},{"name":"minus","componentName":"IconMinus"},{"name":"plus-circle","componentName":"IconPlusCircle"},{"name":"plus","componentName":"IconPlus"},{"name":"question-circle","componentName":"IconQuestionCircle"},{"name":"question","componentName":"IconQuestion"},{"name":"stop","componentName":"IconStop"}]},"interactive-button":{"fill":[{"name":"heart-fill","componentName":"IconHeartFill"},{"name":"star-fill","componentName":"IconStarFill"},{"name":"thumb-down-fill","componentName":"IconThumbDownFill"},{"name":"thumb-up-fill","componentName":"IconThumbUpFill"}],"outline":[{"name":"at","componentName":"IconAt"},{"name":"cloud-download","componentName":"IconCloudDownload"},{"name":"code-block","componentName":"IconCodeBlock"},{"name":"code-square","componentName":"IconCodeSquare"},{"name":"code","componentName":"IconCode"},{"name":"customer-service","componentName":"IconCustomerService"},{"name":"download","componentName":"IconDownload"},{"name":"export","componentName":"IconExport"},{"name":"eye-invisible","componentName":"IconEyeInvisible"},{"name":"eye","componentName":"IconEye"},{"name":"heart","componentName":"IconHeart"},{"name":"history","componentName":"IconHistory"},{"name":"home","componentName":"IconHome"},{"name":"import","componentName":"IconImport"},{"name":"launch","componentName":"IconLaunch"},{"name":"list","componentName":"IconList"},{"name":"message-banned","componentName":"IconMessageBanned"},{"name":"message","componentName":"IconMessage"},{"name":"more-vertical","componentName":"IconMoreVertical"},{"name":"more","componentName":"IconMore"},{"name":"poweroff","componentName":"IconPoweroff"},{"name":"refresh","componentName":"IconRefresh"},{"name":"reply","componentName":"IconReply"},{"name":"save","componentName":"IconSave"},{"name":"scan","componentName":"IconScan"},{"name":"search","componentName":"IconSearch"},{"name":"select-all","componentName":"IconSelectAll"},{"name":"send","componentName":"IconSend"},{"name":"settings","componentName":"IconSettings"},{"name":"share-alt","componentName":"IconShareAlt"},{"name":"share-external","componentName":"IconShareExternal"},{"name":"share-internal","componentName":"IconShareInternal"},{"name":"star","componentName":"IconStar"},{"name":"sync","componentName":"IconSync"},{"name":"thumb-down","componentName":"IconThumbDown"},{"name":"thumb-up","componentName":"IconThumbUp"},{"name":"translate","componentName":"IconTranslate"},{"name":"upload","componentName":"IconUpload"},{"name":"voice","componentName":"IconVoice"}]},"edit":{"outline":[{"name":"align-center","componentName":"IconAlignCenter"},{"name":"align-left","componentName":"IconAlignLeft"},{"name":"align-right","componentName":"IconAlignRight"},{"name":"attachment","componentName":"IconAttachment"},{"name":"bg-colors","componentName":"IconBgColors"},{"name":"bold","componentName":"IconBold"},{"name":"brush","componentName":"IconBrush"},{"name":"copy","componentName":"IconCopy"},{"name":"delete","componentName":"IconDelete"},{"name":"edit","componentName":"IconEdit"},{"name":"eraser","componentName":"IconEraser"},{"name":"filter","componentName":"IconFilter"},{"name":"find-replace","componentName":"IconFindReplace"},{"name":"font-colors","componentName":"IconFontColors"},{"name":"formula","componentName":"IconFormula"},{"name":"h1","componentName":"IconH1"},{"name":"h2","componentName":"IconH2"},{"name":"h3","componentName":"IconH3"},{"name":"h4","componentName":"IconH4"},{"name":"h5","componentName":"IconH5"},{"name":"h6","componentName":"IconH6"},{"name":"h7","componentName":"IconH7"},{"name":"highlight","componentName":"IconHighlight"},{"name":"italic","componentName":"IconItalic"},{"name":"line-height","componentName":"IconLineHeight"},{"name":"link","componentName":"IconLink"},{"name":"oblique-line","componentName":"IconObliqueLine"},{"name":"ordered-list","componentName":"IconOrderedList"},{"name":"original-size","componentName":"IconOriginalSize"},{"name":"paste","componentName":"IconPaste"},{"name":"quote","componentName":"IconQuote"},{"name":"redo","componentName":"IconRedo"},{"name":"scissor","componentName":"IconScissor"},{"name":"sort-ascending","componentName":"IconSortAscending"},{"name":"sort-descending","componentName":"IconSortDescending"},{"name":"sort","componentName":"IconSort"},{"name":"strikethrough","componentName":"IconStrikethrough"},{"name":"underline","componentName":"IconUnderline"},{"name":"undo","componentName":"IconUndo"},{"name":"unordered-list","componentName":"IconUnorderedList"},{"name":"zoom-in","componentName":"IconZoomIn"},{"name":"zoom-out","componentName":"IconZoomOut"}]},"media":{"fill":[{"name":"mute-fill","componentName":"IconMuteFill"},{"name":"pause-circle-fill","componentName":"IconPauseCircleFill"},{"name":"play-arrow-fill","componentName":"IconPlayArrowFill"},{"name":"play-circle-fill","componentName":"IconPlayCircleFill"},{"name":"skip-next-fill","componentName":"IconSkipNextFill"},{"name":"skip-previous-fill","componentName":"IconSkipPreviousFill"},{"name":"sound-fill","componentName":"IconSoundFill"}],"outline":[{"name":"backward","componentName":"IconBackward"},{"name":"forward","componentName":"IconForward"},{"name":"fullscreen-exit","componentName":"IconFullscreenExit"},{"name":"fullscreen","componentName":"IconFullscreen"},{"name":"live-broadcast","componentName":"IconLiveBroadcast"},{"name":"music","componentName":"IconMusic"},{"name":"mute","componentName":"IconMute"},{"name":"pause-circle","componentName":"IconPauseCircle"},{"name":"pause","componentName":"IconPause"},{"name":"play-arrow","componentName":"IconPlayArrow"},{"name":"play-circle","componentName":"IconPlayCircle"},{"name":"record-stop","componentName":"IconRecordStop"},{"name":"record","componentName":"IconRecord"},{"name":"skip-next","componentName":"IconSkipNext"},{"name":"skip-previous","componentName":"IconSkipPrevious"},{"name":"sound","componentName":"IconSound"}]},"logo":{"color":[{"name":"bytedance-color","componentName":"IconBytedanceColor"},{"name":"lark-color","componentName":"IconLarkColor"},{"name":"tiktok-color","componentName":"IconTiktokColor"},{"name":"xigua-color","componentName":"IconXiguaColor"}],"fill":[{"name":"faceBook-circle-fill","componentName":"IconFaceBookCircleFill"},{"name":"facebook-square-fill","componentName":"IconFacebookSquareFill"},{"name":"google-circle-fill","componentName":"IconGoogleCircleFill"},{"name":"qq-circle-fill","componentName":"IconQqCircleFill"},{"name":"twitter-circle-fill","componentName":"IconTwitterCircleFill"},{"name":"weibo-circle-fill","componentName":"IconWeiboCircleFill"}],"outline":[{"name":"alipay-circle","componentName":"IconAlipayCircle"},{"name":"code-sandbox","componentName":"IconCodeSandbox"},{"name":"codepen","componentName":"IconCodepen"},{"name":"facebook","componentName":"IconFacebook"},{"name":"github","componentName":"IconGithub"},{"name":"gitlab","componentName":"IconGitlab"},{"name":"google","componentName":"IconGoogle"},{"name":"qq-zone","componentName":"IconQqZone"},{"name":"qq","componentName":"IconQq"},{"name":"twitter","componentName":"IconTwitter"},{"name":"wechat","componentName":"IconWechat"},{"name":"wechatpay","componentName":"IconWechatpay"},{"name":"weibo","componentName":"IconWeibo"}]},"general":{"fill":[{"name":"chinese-fill","componentName":"IconChineseFill"},{"name":"english-fill","componentName":"IconEnglishFill"},{"name":"face-frown-fill","componentName":"IconFaceFrownFill"},{"name":"face-meh-fill","componentName":"IconFaceMehFill"},{"name":"face-smile-fill","componentName":"IconFaceSmileFill"},{"name":"moon-fill","componentName":"IconMoonFill"},{"name":"pen-fill","componentName":"IconPenFill"},{"name":"sun-fill","componentName":"IconSunFill"}],"outline":[{"name":"apps","componentName":"IconApps"},{"name":"archive","componentName":"IconArchive"},{"name":"book","componentName":"IconBook"},{"name":"branch","componentName":"IconBranch"},{"name":"bug","componentName":"IconBug"},{"name":"bulb","componentName":"IconBulb"},{"name":"calendar-clock","componentName":"IconCalendarClock"},{"name":"calendar","componentName":"IconCalendar"},{"name":"camera","componentName":"IconCamera"},{"name":"cloud","componentName":"IconCloud"},{"name":"command","componentName":"IconCommand"},{"name":"common","componentName":"IconCommon"},{"name":"compass","componentName":"IconCompass"},{"name":"copyright","componentName":"IconCopyright"},{"name":"dashboard","componentName":"IconDashboard"},{"name":"desktop","componentName":"IconDesktop"},{"name":"dice","componentName":"IconDice"},{"name":"drag-dot-vertical","componentName":"IconDragDotVertical"},{"name":"drag-dot","componentName":"IconDragDot"},{"name":"drive-file","componentName":"IconDriveFile"},{"name":"ear","componentName":"IconEar"},{"name":"email","componentName":"IconEmail"},{"name":"empty","componentName":"IconEmpty"},{"name":"experiment","componentName":"IconExperiment"},{"name":"file-audio","componentName":"IconFileAudio"},{"name":"file-image","componentName":"IconFileImage"},{"name":"file-pdf","componentName":"IconFilePdf"},{"name":"file-video","componentName":"IconFileVideo"},{"name":"file","componentName":"IconFile"},{"name":"fire","componentName":"IconFire"},{"name":"folder-add","componentName":"IconFolderAdd"},{"name":"folder-delete","componentName":"IconFolderDelete"},{"name":"folder","componentName":"IconFolder"},{"name":"gift","componentName":"IconGift"},{"name":"idcard","componentName":"IconIdcard"},{"name":"image-close","componentName":"IconImageClose"},{"name":"image","componentName":"IconImage"},{"name":"interaction","componentName":"IconInteraction"},{"name":"language","componentName":"IconLanguage"},{"name":"layout","componentName":"IconLayout"},{"name":"loading","componentName":"IconLoading"},{"name":"location","componentName":"IconLocation"},{"name":"lock","componentName":"IconLock"},{"name":"loop","componentName":"IconLoop"},{"name":"man","componentName":"IconMan"},{"name":"menu","componentName":"IconMenu"},{"name":"mind-mapping","componentName":"IconMindMapping"},{"name":"mobile","componentName":"IconMobile"},{"name":"moon","componentName":"IconMoon"},{"name":"mosaic","componentName":"IconMosaic"},{"name":"nav","componentName":"IconNav"},{"name":"notification-close","componentName":"IconNotificationClose"},{"name":"notification","componentName":"IconNotification"},{"name":"palette","componentName":"IconPalette"},{"name":"pen","componentName":"IconPen"},{"name":"phone","componentName":"IconPhone"},{"name":"printer","componentName":"IconPrinter"},{"name":"public","componentName":"IconPublic"},{"name":"pushpin","componentName":"IconPushpin"},{"name":"qrcode","componentName":"IconQrcode"},{"name":"robot-add","componentName":"IconRobotAdd"},{"name":"robot","componentName":"IconRobot"},{"name":"safe","componentName":"IconSafe"},{"name":"schedule","componentName":"IconSchedule"},{"name":"shake","componentName":"IconShake"},{"name":"skin","componentName":"IconSkin"},{"name":"stamp","componentName":"IconStamp"},{"name":"storage","componentName":"IconStorage"},{"name":"subscribe-add","componentName":"IconSubscribeAdd"},{"name":"subscribe","componentName":"IconSubscribe"},{"name":"subscribed","componentName":"IconSubscribed"},{"name":"sun","componentName":"IconSun"},{"name":"tag","componentName":"IconTag"},{"name":"tags","componentName":"IconTags"},{"name":"thunderbolt","componentName":"IconThunderbolt"},{"name":"tool","componentName":"IconTool"},{"name":"trophy","componentName":"IconTrophy"},{"name":"unlock","componentName":"IconUnlock"},{"name":"user-add","componentName":"IconUserAdd"},{"name":"user-group","componentName":"IconUserGroup"},{"name":"user","componentName":"IconUser"},{"name":"video-camera","componentName":"IconVideoCamera"},{"name":"wifi","componentName":"IconWifi"},{"name":"woman","componentName":"IconWoman"}]}}'25);26const newIcons = JSON.parse(27 '[{"file":"general/​outline/​palette.svg","name":"IconPalette","version":"2.19.2"},{"file":"general/​outline/​calendar-clock.svg","name":"IconCalendarClock","version":"2.20.0"}]'28);29const lineCaps = ['butt', 'round', 'square'];30const lineJoins = ['arcs', 'bevel', 'miter', 'miter-clip', 'round'];31const locale = {32 'zh-CN': {33 title: '图标配置',34 line: '线性图标',35 fill: '面性图标',36 color: '多色图标',37 search: '搜索图标,点击可复制图标用法',38 'stroke-width': '线宽:',39 size: '图标大小:',40 lineJoin: '拐角:',41 lineCap: '端点:',42 desc1: '全局配置(将以下的类添加到 css 中):',43 desc2: (44 <span>45 单个组件的话可以直接将以上样式写到 <code>IconXXX</​code> 的 <code>style</​code> 中46 </​span>47 ),48 'show-config': '显示配置',49 add: '添加',50 iconClassifyModalTitle: '上传图片搜索图标',51 },52 'en-US': {53 title: 'Icon Configuration',54 line: 'Stroke',55 fill: 'Fill',56 color: 'Color',57 search: 'Search icon, click to copy usage',58 'stroke-width': 'Stroke Width:',59 size: 'Size:',60 lineJoin: 'Line Join:',61 lineCap: 'Line Cap:',62 desc1: 'Global configuration (add the following class to css):',63 desc2: (64 <span>65 For a single component, you can directly write the above style to the <code>style</​code>66 of <code>IconXXX</​code>67 </​span>68 ),69 'show-config': 'Show Config',70 add: 'Add',71 iconClassifyModalTitle: 'Upload an image to search for icons',72 },73};74export default function ({ lang = 'zh-CN' }) {75 const [type, setType] = useState('outline');76 const [filter, setFilter] = useState('');77 const [strokeWidth, setStrokeWidth] = useState(4);78 const [lineCap, setLineCap] = useState('butt');79 const [lineJoin, setLineJoin] = useState('miter');80 const [fontSize, setFontSize] = useState(32);81 const sliderStyle = { width: 120, marginRight: 20 };82 const inputNumberStyle = { width: 60 };83 const getWidthStyle = (width) => ({ width });84 const iconStyle = { fontSize };85 const spaceStyle = { justifyContent: 'space-between', whiteSpace: 'nowrap' };86 const [iconClassifyModalVisible, setIconClassifyModalVisible] = useState(false);87 const maps = JSON.parse(88 '{"zh-CN":{"direction":"方向指示类图标","tips":"提示建议类图标","interactive-button":"交互按钮类图标","edit":"编辑类图标","media":"影音类图标","logo":"商标类图标","general":"通用类图标"},"en-US":{"direction":"Direction indicator","tips":"Prompt suggestion","interactive-button":"Interactive button","edit":"Editable","media":"Media","logo":"Logo","general":"General"}}'89 )[lang];90 const t = locale[lang];91 return (92 <div>93 <div className="iconlist-bar">94 <RadioGroup95 size="large"96 type="button"97 mode="fill"98 name="type"99 defaultValue="outline"100 onChange={setType}101 >102 <Radio value="outline">{t.line}</​Radio>103 <Radio value="fill">{t.fill}</​Radio>104 <Radio value="color">{t.color}</​Radio>105 </​RadioGroup>106 <Input.Search size="large" onChange={setFilter} placeholder={t.search} /​>107 <Tooltip content={t.iconClassifyModalTitle}>108 <Button109 size="large"110 icon={<IconCamera /​>}111 style={{ marginLeft: 8 }}112 onClick={() => {113 teaLog(EventMap.searchIconByImg, { type: 'open' });114 setIconClassifyModalVisible(true);115 }}116 /​>117 <IconClassifyModal118 title={t.iconClassifyModalTitle}119 lang={lang}120 visible={iconClassifyModalVisible}121 onVisibleChange={setIconClassifyModalVisible}122 /​>123 </​Tooltip>124 </​div>125 <Affix offsetTop={60} className="iconlist-affix">126 <Space className="iconlist-operations" style={spaceStyle}>127 <Space>128 {t['stroke-width']}129 <Slider130 defaultValue={4}131 style={sliderStyle}132 showTicks133 min={1}134 max={5}135 onChange={(value) => setStrokeWidth(value)}136 /​>137 {t.size}138 <InputNumber139 min={14}140 max={80}141 value={fontSize}142 onChange={(value) => setFontSize(value)}143 style={inputNumberStyle}144 /​>145 {t.lineJoin}146 <Select147 options={lineJoins}148 value={lineJoin}149 onChange={(value) => setLineJoin(value)}150 style={getWidthStyle(100)}151 /​>152 {t.lineCap}153 <Select154 options={lineCaps}155 value={lineCap}156 onChange={(value) => setLineCap(value)}157 style={getWidthStyle(84)}158 /​>159 </​Space>160 <Button161 type="primary"162 onClick={() =>163 Modal.success({164 title: t.title,165 content: (166 <div>167 <Paragraph>{t.desc1} </​Paragraph>168 <Paragraph code>{`.arco-icon {169 font-size: ${fontSize};170 ${lineCap !== 'butt' ? `stroke-linecap: ${lineCap};` : ''}171 ${lineJoin !== 'miter' ? `stroke-linejoin: ${lineJoin};` : ''}172 ${strokeWidth !== 4 ? `stroke-width: ${strokeWidth};` : ''}173 }`}</​Paragraph>174 <Paragraph>{t.desc2}</​Paragraph>175 </​div>176 ),177 })178 }179 >180 {t['show-config']}181 </​Button>182 </​Space>183 </​Affix>184 {Object.keys(svgData).map((key) => {185 const filteredData =186 filter && svgData[key][type]187 ? svgData[key][type].filter((s) => {188 return s.componentName.toLowerCase().indexOf(filter.toLowerCase()) !== -1;189 })190 : svgData[key][type];191 let className = 'iconlist-wrapper';192 if (key === 'out-of-date') {193 className += ' out-of-date';194 }195 return filteredData && filteredData.length ? (196 <div className={className} key={key}>197 <div className="iconlist-title" id={maps[key]}>198 {maps[key]}199 </​div>200 <ul className="iconlist">201 {filteredData.map((n) => {202 const Tag = icons[n.componentName];203 const newIcon = newIcons.find((_n) => _n.name === n.componentName);204 return (205 <li key={n.componentName} className="icon-cell" aria-label={n.componentName}>206 <div className="icon-show">207 <Tag208 strokeWidth={strokeWidth}209 strokeLinecap={lineCap}210 strokeLinejoin={lineJoin}211 style={iconStyle}212 /​>213 </​div>214 <p className="name">{n.componentName}</​p>215 {newIcon ? (216 <span className="version">217 {newIcon.version} {t.add}218 </​span>219 ) : null}220 </​li>221 );222 })}223 </​ul>224 </​div>225 ) : null;226 })}227 </​div>228 );...

Full Screen

Full Screen

new.js

Source: new.js Github

copy

Full Screen

1'use strict';2console.log();3process.on('exit', () => {4 console.log();5});6if (!process.argv[2]) {7 console.error('[组件名]必填 - Please enter new component name');8 process.exit(1);9}10const path = require('path');11const fs = require('fs');12const fileSave = require('file-save');13const uppercamelcase = require('uppercamelcase');14const componentname = process.argv[2];15const chineseName = process.argv[3] || componentname;16const ComponentName = uppercamelcase(componentname);17const PackagePath = path.resolve(__dirname, '../​../​packages', componentname);18const Files = [19 {20 filename: 'index.js',21 content: `import ${ComponentName} from './​src/​main';22/​* istanbul ignore next */​23${ComponentName}.install = function(Vue) {24 Vue.component(${ComponentName}.name, ${ComponentName});25};26export default ${ComponentName};`27 },28 {29 filename: 'src/​main.vue',30 content: `<template>31 <div class="el-${componentname}"></​div>32</​template>33<script>34export default {35 name: 'El${ComponentName}'36};37</​script>`38 },39 {40 filename: path.join('../​../​examples/​docs/​zh-CN', `${componentname}.md`),41 content: `## ${ComponentName} ${chineseName}`42 },43 {44 filename: path.join('../​../​examples/​docs/​en-US', `${componentname}.md`),45 content: `## ${ComponentName}`46 },47 {48 filename: path.join('../​../​examples/​docs/​es', `${componentname}.md`),49 content: `## ${ComponentName}`50 },51 {52 filename: path.join('../​../​examples/​docs/​fr-FR', `${componentname}.md`),53 content: `## ${ComponentName}`54 },55 {56 filename: path.join('../​../​test/​unit/​specs', `${componentname}.spec.js`),57 content: `import { createTest, destroyVM } from '../​util';58import ${ComponentName} from 'packages/​${componentname}';59describe('${ComponentName}', () => {60 let vm;61 afterEach(() => {62 destroyVM(vm);63 });64 it('create', () => {65 vm = createTest(${ComponentName}, true);66 expect(vm.$el).to.exist;67 });68});69`70 },71 {72 filename: path.join('../​../​packages/​theme-chalk/​src', `${componentname}.scss`),73 content: `@import "mixins/​mixins";74@import "common/​var";75@include b(${componentname}) {76}`77 },78 {79 filename: path.join('../​../​types', `${componentname}.d.ts`),80 content: `import { ElementUIComponent } from './​component'81/​** ${ComponentName} Component */​82export declare class El${ComponentName} extends ElementUIComponent {83}`84 }85];86/​/​ 添加到 components.json87const componentsFile = require('../​../​components.json');88if (componentsFile[componentname]) {89 console.error(`${componentname} 已存在.`);90 process.exit(1);91}92componentsFile[componentname] = `./​packages/​${componentname}/​index.js`;93fileSave(path.join(__dirname, '../​../​components.json'))94 .write(JSON.stringify(componentsFile, null, ' '), 'utf8')95 .end('\n');96/​/​ 添加到 index.scss97const sassPath = path.join(__dirname, '../​../​packages/​theme-chalk/​src/​index.scss');98const sassImportText = `${fs.readFileSync(sassPath)}@import "./​${componentname}.scss";`;99fileSave(sassPath)100 .write(sassImportText, 'utf8')101 .end('\n');102/​/​ 添加到 element-ui.d.ts103const elementTsPath = path.join(__dirname, '../​../​types/​element-ui.d.ts');104let elementTsText = `${fs.readFileSync(elementTsPath)}105/​** ${ComponentName} Component */​106export class ${ComponentName} extends El${ComponentName} {}`;107const index = elementTsText.indexOf('export') - 1;108const importString = `import { El${ComponentName} } from './​${componentname}'`;109elementTsText = elementTsText.slice(0, index) + importString + '\n' + elementTsText.slice(index);110fileSave(elementTsPath)111 .write(elementTsText, 'utf8')112 .end('\n');113/​/​ 创建 package114Files.forEach(file => {115 fileSave(path.join(PackagePath, file.filename))116 .write(file.content, 'utf8')117 .end('\n');118});119/​/​ 添加到 nav.config.json120const navConfigFile = require('../​../​examples/​nav.config.json');121Object.keys(navConfigFile).forEach(lang => {122 let groups = navConfigFile[lang][4].groups;123 groups[groups.length - 1].list.push({124 path: `/​${componentname}`,125 title: lang === 'zh-CN' && componentname !== chineseName126 ? `${ComponentName} ${chineseName}`127 : ComponentName128 });129});130fileSave(path.join(__dirname, '../​../​examples/​nav.config.json'))131 .write(JSON.stringify(navConfigFile, null, ' '), 'utf8')132 .end('\n');...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var ladle = require('ladle');2var component = ladle.componentName();3console.log(component);4var ladle = require('ladle');5var component = ladle.componentName();6console.log(component);7var ladle = require('ladle');8var component = ladle.componentName();9console.log(component);10var ladle = require('ladle');11var component = ladle.componentName();12console.log(component);13var ladle = require('ladle');14var component = ladle.componentName();15console.log(component);16var ladle = require('ladle');17var component = ladle.componentName();18console.log(component);19var ladle = require('ladle');20var component = ladle.componentName();21console.log(component);22var ladle = require('ladle');23var component = ladle.componentName();24console.log(component);25var ladle = require('ladle');26var component = ladle.componentName();27console.log(component);28var ladle = require('ladle');29var component = ladle.componentName();30console.log(component);31var ladle = require('ladle');32var component = ladle.componentName();33console.log(component);34var ladle = require('ladle');35var component = ladle.componentName();36console.log(component);37var ladle = require('ladle');38var component = ladle.componentName();39console.log(component);40var ladle = require('ladle');41var component = ladle.componentName();

Full Screen

Using AI Code Generation

copy

Full Screen

1var ladle = require('ladle');2var component = ladle.componentName();3var ladle = require('ladle');4var component = ladle.component();5var ladle = require('ladle');6var component = ladle.component({configFile: 'config.json'});7var ladle = require('ladle');8var component = ladle.component({configFile: 'config.json', logDir: 'logs'});9var ladle = require('ladle');10var component = ladle.component({configFile: 'config.json', logDir: 'logs', logLevel: 'debug'});11var ladle = require('ladle');12var component = ladle.component({configFile: 'config.json', logDir: 'logs', logLevel: 'debug', logFile: 'myLog.log'});13var ladle = require('ladle');14var component = ladle.component({configFile: 'config.json', logDir: 'logs', logLevel: 'debug', logFile: 'myLog.log', logSize: 1000000});15var ladle = require('ladle');16var component = ladle.component({configFile: 'config.json', logDir: 'logs', logLevel: 'debug', logFile: 'myLog.log', logSize: 1000000, logCount: 5});17var ladle = require('ladle');

Full Screen

Using AI Code Generation

copy

Full Screen

1var ladle = require('./​ladle.js');2var ladleObject = new ladle();3console.log(ladleObject.componentName());4module.exports = function(){5 this.componentName = function(){6 return "ladle";7 }8}

Full Screen

Using AI Code Generation

copy

Full Screen

1var ladle = require('ladle');2var componentName = ladle.componentName;3var compName = componentName();4console.log(compName);5var ladle = require('ladle');6var componentName = ladle.componentName;7var compName = componentName();8console.log(compName);9var ladle = require('ladle');10var componentName = ladle.componentName;11var compName = componentName();12console.log(compName);13var ladle = require('ladle');14var componentName = ladle.componentName;15var compName = componentName();16console.log(compName);17var ladle = require('ladle');18var componentName = ladle.componentName;19var compName = componentName();20console.log(compName);21var ladle = require('ladle');22var componentName = ladle.componentName;23var compName = componentName();24console.log(compName);25var ladle = require('ladle');26var componentName = ladle.componentName;27var compName = componentName();28console.log(compName);29var ladle = require('ladle');30var componentName = ladle.componentName;31var compName = componentName();32console.log(compName);33var ladle = require('ladle');34var componentName = ladle.componentName;35var compName = componentName();36console.log(compName);37var ladle = require('ladle');38var componentName = ladle.componentName;39var compName = componentName();40console.log(compName);41var ladle = require('ladle');42var componentName = ladle.componentName;43var compName = componentName();44console.log(compName);45var ladle = require('ladle');

Full Screen

Using AI Code Generation

copy

Full Screen

1var ladle = require('ladle');2var componentName = ladle.componentName;3var component = componentName('test');4console.log(component);5var ladle = require('ladle');6var componentName = ladle.componentName;7var component = componentName('test2');8console.log(component);9var ladle = require('ladle');10var componentName = ladle.componentName;11var component = componentName('test3');12console.log(component);13var ladle = require('ladle');14var componentName = ladle.componentName;15var component = componentName('test');16console.log(component);17var component2 = componentName();18console.log(component2);19var ladle = require('ladle');20var componentName = ladle.componentName;21var component = componentName('test');22console.log(component);23var ladle = require('ladle');24var componentName = ladle.componentName;25var component = componentName('test2');26console.log(component);27var ladle = require('ladle');28var componentName = ladle.componentName;29var component = componentName('test3');30console.log(component);

Full Screen

Using AI Code Generation

copy

Full Screen

1var ladle = require('ladle');2var log = ladle.createLogger({3});4log.debug('this is a test');5log.info('this is a test');6log.warn('this is a test');7log.error('this is a test');8log.fatal('this is a test');9var ladle = require('ladle');10var log = ladle.createLogger({11});12log.debug('this is a test');13log.info('this is a test');14log.warn('this is a test');15log.error('this is a test');16log.fatal('this is a test');17{"name":"test","hostname":"hostName","pid":1234,"level":20,"component":"test","msg":"this is a test","time":"2013-06-10T23:20:17.000Z","v":0}18{"name":"test","hostname":"hostName","pid":1234,"level":20,"component":"other","msg":"this is a test","time":"2013-06-10T23:20:17.000Z","v":0}

Full Screen

Blogs

Check out the latest blogs from LambdaTest on this topic:

Test strategy and how to communicate it

I routinely come across test strategy documents when working with customers. They are lengthy—100 pages or more—and packed with monotonous text that is routinely reused from one project to another. Yawn once more— the test halt and resume circumstances, the defect management procedure, entrance and exit criteria, unnecessary generic risks, and in fact, one often-used model replicates the requirements of textbook testing, from stress to systems integration.

Continuous delivery and continuous deployment offer testers opportunities for growth

Development practices are constantly changing and as testers, we need to embrace change. One of the changes that we can experience is the move from monthly or quarterly releases to continuous delivery or continuous deployment. This move to continuous delivery or deployment offers testers the chance to learn new skills.

How To Use Playwright For Web Scraping with Python

In today’s data-driven world, the ability to access and analyze large amounts of data can give researchers, businesses & organizations a competitive edge. One of the most important & free sources of this data is the Internet, which can be accessed and mined through web scraping.

How To Create Custom Menus with CSS Select

When it comes to UI components, there are two versatile methods that we can use to build it for your website: either we can use prebuilt components from a well-known library or framework, or we can develop our UI components from scratch.

How to Position Your Team for Success in Estimation

Estimates are critical if you want to be successful with projects. If you begin with a bad estimating approach, the project will almost certainly fail. To produce a much more promising estimate, direct each estimation-process issue toward a repeatable standard process. A smart approach reduces the degree of uncertainty. When dealing with presales phases, having the most precise estimation findings can assist you to deal with the project plan. This also helps the process to function more successfully, especially when faced with tight schedules and the danger of deviation.

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run ladle automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful