open-index/open-npm huggingface dataset:
npm package: @mdfe/react-linkify
Description: React component to parse links (urls, emails, etc.) in text into clickable links
Author: Tasti Zakarie
Latest version: 1.0.0-alpha

# [react-linkify](http://tasti.github.io/react-linkify/)
React component to parse links (urls, emails, etc.) in text into clickable links

## Examples

Live examples are available at [http://tasti.github.io/react-linkify/](http://tasti.github.io/react-linkify/).

### Basic

Any link that appears inside the `Linkify` component will become clickable.

```
<Linkify>See examples at tasti.github.io/react-linkify/.</Linkify>
```

Renders to:

See examples at `tasti.github.io/react-linkify/`.

### Advanced

If you're feeling lazy, you can wrap `Linkify` around anywhere that you want links to become clickable. Even with nested elements, it traverses the tree to find links.

```
<Linkify>
  <div>react-linkify <span>(tasti.github.io/react-linkify/)</span></div>
    <div>React component to parse links (urls, emails, etc.) in text into clickable links</div>
  See examples at tasti.github.io/react-linkify/.
    <footer>Contact: tasti@zakarie.com</footer>
</Linkify>
```

Renders to:

react-linkify (`tasti.github.io/react-linkify/`)
React component to parse links (urls, emails, etc.) in text into clickable links
See examples at `tasti.github.io/react-linkify/`.
Contact: `tasti@zakarie.com`


## Installation

```
yarn add react-linkify
```

or

```
npm install react-linkify --save
```

## Usage

```js
import Linkify from 'react-linkify';

React.render(
  <Linkify>Examples are available at tasti.github.io/react-linkify/.</Linkify>,
  document.body
);
```

## Props

**component**
The type of component to wrap links in.
_type:_ `any`
_default:_ `'a'`

**properties**
The props that will be added to every matched component.
_type:_ `object`
_default:_ `{}`

NOTE: Use `Linkify.MATCH` as a value to specify the matched link. The properties prop will always contain `{href: Linkify.MATCH, key: 'LINKIFY_KEY_#'}` unless overridden.


## Customization

You can access to the global `Linkify` instance used to linkify contents by importing it (`import { linkify } from 'react-linkify'`).
That way you can customize as needed (e.g. disabling existing schemas or adding new ones).

Note that any customization made to that instance will affect every `Linkify` component you use.

## Examples

All kind of links detectable by
[linkify-it](https://github.com/markdown-it/linkify-it) are supported. For
examples, visit [their website](http://markdown-it.github.io/linkify-it/).
npm package: @mdfjs/node
Description: mdf 混合项目工程模块
Author: qy
Latest version: 0.2.8

### mdf-node
node 工程模块，主要用来处理 node 项目的生成、构建与插件集成

#### todos
- 抽象基础能力（shared）封入框架层，main.ts 使用通用方案处理
- updater 升级提示，容器脚本
- middleware with nest 中间件融合
- 标准化打包 static + server
- 更多云端能力的接入

#### main.ts
由框架生成，用于配置化与内部扩展

#### 目录规范
与 web 项目不同，node 项目根据 type 类型会采取不同的处理方式
- hybrid 混合项目，带有 client 和 server 目录，打包成 static 与 server
- node 项目，只有 src，打包成 server

#### 稳定性
支持 promethus 接口，接入阿里云日志 sdk
- 链路监控
- 异常、内存监控
- 发布

#### 高可用
- 备份
- 负载均衡
- 多级缓存
- 集群
npm package: @mdfjs/react
Description: separate plugins-react from mdfjs
Author: qy
Latest version: 0.1.13

### mdf-react
为 mdfjs 提供 react 技术栈支持

#### todos
- 内置 rematch 开发框架

#### 开发流程
link 模块到项目，同时 pkg 里面也要加入 dependencies，这样 mdfjs 主模块会自动读取
- cd mdf-reaact
- yarn link
- cd mdf-demo
- yarn link @mdfjs/react

##### 注意
- create-mdfjs 模板里要加入模块依赖
- mdfjs 里的模块要设置成 private
npm package: @mdfjs/server
Description: mdf node server
Author: qy
Latest version: 0.2.20

### mdf server
为什么要自己写
更多的自主控制，实现复杂功能

#### 依赖
- webpack-dev-middleware、webpack-hot-middleware
- html generator
- server router
- sockjs
- hot-client-js

#### mdf-ui
编辑时，结合组件化，以可视化的方式创建页面，也融合可视化商城进来
node 起服务，提供配置页面
ws 通信，前端修改发到 server，同步更新文件系统
最终实现 ui 配置 code

#### 多协议支持
这个应该通过 node 服务来提供，开发环境协议切换没什么意义

#### serverless
提供 SCF 云函数编程能力
框架封装底层的触发器，容器，应用链路套件
这是一个比较好的业务能力升级场景
普通团队很难自己去落地


```javascript
// 获取复杂参数
const { devMiddleware, serverOpts } = bundler.setupDev(true);

const server = new Server({
  devMiddleware,
  serverOpts,
  onListening: function (ret: any) {
    serverOpts.after();
  },
});

server.start();
```
npm package: @mdfjs/vue
Description: vue plugins for mdfjs
Author: qy
Latest version: 0.0.23

### vue 工程模块
为 mdf 提供 vue 方向技术栈的支持

#### todos
- block updater 路径一致比较能否简化
- 支持 vuex

#### vite
使用 vite 替代 webpack dev 的可行性
- 问题是 vite 的插件是基于 rollup 体系的，与 tapable 规范不一样
- dev 使用 vite，build 使用 webpack，就要维护两套 chain 的机制？？

#### 替换 css rules
``` javascript
const loader = module.rule('sass').oneOf('css-modules').use('styleLoader');
// 替换 style loader
if (loader.values().length) {
   loader.loader(require.resolve('vue-style-loader'));
}

console.log((chain.toConfig() as any).module.rules[5])
console.log((chain.toConfig() as any).module.rules[5].oneOf[0].use)
```