detect-one-changed
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2 • Public • Published

    detect-one-changed

    Build status Test coverage NPM version NPM Downloads Prettier Conventional Commits

    Detect first changed html and markdown between old text and the new

    Live Demo

    Table of Contents

    Installation

    npm install detect-one-changed
    # or use yarn 
    yarn add detect-one-changed

    Usage

    Use it as an package

    const { detectMarkdown } = require('detect-one-changed')
     
    detectMarkdown('abcd\n\n# old', 'abcd\n\n# new').text
    // => 'abcd\n\n<p class="detected-updated" style="">\n\n# new\n\n</p>\n'
    const { detectMarkdown } = require('detect-one-changed')
    const remark = require('remark')
    const html = require('remark-html')
     
    remark()
      .use(html)
      .stringify(detectMarkdown('abcd\n\n# old', 'abcd\n\n# new', { wrapType: 'ast' }).ast)
    // => '<p>abcd</p>\n<h1 class="detected-updated">new</h1>\n'
    const { detectHtml } = require('detect-one-changed')
     
    detectHtml('<p>old</p>', '<p class="new-cls">new</p>').text
    // => '<p class="detected-updated new-cls">new</p>'

    Use it as webpack loader

    More information please see loader's document and webpack example

    • Step one: (webpack.config.js)

      // ...
      devServer: {
        hot: true
      },
      module: {
        rules: [
          {
            test: /\.md$/,
            use: [
              process.env.NODE_ENV !== 'production' && {
                name: 'detect-one-changed/md-loader',
                options: { returnType: 'text' }
              }
              // { name: 'some-md-to-html-loader' },
            ].filter(Boolean)
          }
        ]
      }
      // ...
    • Step two (set up HMR in browser)

      function start() {
        document.querySelector('.markdown-body').innerHTML = require('./path/to/some.md')
      }
       
      if (module.hot) {
        module.hot.accept('./path/to/some.md', () => {
          // Injects highlight css text in <style/>
          require('!style-loader!css-loader!detect-one-changed/style.css')
          start()
       
          const node = document.querySelector('.markdown-body .detected-updated')
          if (node) {
            // Scroll to updated node
            node.scrollIntoView({ behavior: 'smooth' })
          }
        })
      }
    • Step three

      1. npm install webpack webpack-dev-server -D
      2. webpack-dev-server

    Use in MDX

    • webpack.config.js
      ...
        {
          use: /\.mdx?$/,
          loaders: [
            {
              name: '@mdx-js/mdx-loader',
              options: {
                mdPlugin: [require('detect-one-changed/remark-plugin')]
              }
            }
          ]
        }
    • src/index.js (entry)

      import * as React from 'react'
      import { render } from 'react-dom'
       
      function start() {
        const Markdown = require('./markdown.mdx').default
        render(<Markdown />, document.querySelector('.markdown-body'))
      }
       
      start()
       
      if (module.hot && process.env.NODE_ENV !== 'production') {
        module.hot.accept(['./markdown.mdx'], () => {
          require('!style-loader!css-loader!detect-one-changed/style.css')
          start()
       
          const node = document.querySelector('.detected-updated')
          if (node) {
            node.scrollIntoView({ behavior: 'smooth' })
          }
        })
      }

    API

    See API

    Related

    • live-markd - 📝Github Favorite Markdown preview with live rendering & location and highlight changed block.

    Contributing

    • Fork it!
    • Create your new branch:
      git checkout -b feature-new or git checkout -b fix-which-bug
    • Start your magic work now
    • Make sure npm test passes
    • Commit your changes:
      git commit -am 'feat: some description (close #123)' or git commit -am 'fix: some description (fix #123)'
    • Push to the branch: git push
    • Submit a pull request :)

    Authors

    This library is written and maintained by imcuttle, moyuyc95@gmail.com.

    License

    MIT - imcuttle 🐟

    Install

    npm i detect-one-changed

    DownloadsWeekly Downloads

    3

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    39.4 kB

    Total Files

    21

    Last publish

    Collaborators

    • moyuyc