npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dash-dangerously-set-inner-html

v0.0.2

Published

A dash component for specifying raw HTML

Downloads

1,803

Readme

dash-dangerously-set-inner-html

Render a string of raw, unescaped HTML. This uses React.js's dangerouslySetInnerHTML method. From React.js's documentation, note that:

Setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) (https://en.wikipedia.org/wiki/Cross-site_scripting) attack.

So, you can set HTML directly in Dash through React.js, but you have to type out dangerouslySetInnerHTML to remind yourself that it's dangerous.

In most cases, you are safer using the Dash HTML component classes, dash-html-components (https://github.com/plotly/dash-html-components). You can also provide HTML in a sandboxed iframe using the dash_html_components.IFrame(srcDoc='raw html here') component, see https://community.plot.ly/t/rendering-html-similar-to-markdown/6232/2?u=chriddyp

Note that the elements in the HTML block that is generated can not be targeted with Dash callbacks.

Install with

pip install dash-dangerously-set-inner-html

Usage

import dash_dangerously_set_inner_html
import dash
import dash_html_components as html

app = dash.Dash('')

app.scripts.config.serve_locally = True

app.layout = html.Div([
    dash_dangerously_set_inner_html.DangerouslySetInnerHTML('''
        <h1>Header</h1>
    '''),
])

if __name__ == '__main__':
    app.run_server(debug=True)

Dash

Go to this link to learn about Dash.

Getting started

# Install dependencies
$ npm install

# Watch source for changes and build to `lib/`
$ npm start

Development

Demo server

You can start up a demo development server to see a demo of the rendered components:

$ builder run demo
$ open http://localhost:9000

You have to maintain the list of components in demo/Demo.react.js.

Code quality and tests

To run lint and unit tests:

$ npm test

To run unit tests and watch for changes:

$ npm run test-watch

To debug unit tests in a browser (Chrome):

$ npm run test-debug
  1. Wait until Chrome launches.
  2. Click the "DEBUG" button in the top right corner.
  3. Open up Chrome Devtools (Cmd+opt+i).
  4. Click the "Sources" tab.
  5. Find source files
  • Navigate to webpack:// -> . -> spec/components to find your test source files.
  • Navigate to webpack:// -> [your/repo/path]] -> dash-dangerously-set-inner-html -> src to find your component source files.
  1. Now you can set breakpoints and reload the page to hit them.
  2. The test output is available in the "Console" tab, or in any tab by pressing "Esc".

To run a specific test

In your test, append .only to a describe or it statement:

describe.only('Foo component', () => {
    // ...
});

Testing your components in Dash

  1. Build development bundle to lib/ and watch for changes

     # Once this is started, you can just leave it running.
     $ npm start
  2. Install module locally (after every change)

     # Generate metadata, and build the JavaScript bundle
     $ npm run install-local
    
     # Now you're done. For subsequent changes, if you've got `npm start`
     # running in a separate process, it's enough to just do:
     $ python setup.py install
  3. Run the dash layout you want to test

     # Import dash-dangerously-set-inner-html to your layout, then run it:
     $ python my_dash_layout.py

TODO: There is a workflow that links your module into site-packages which would make it unnecessary to re-run 2. on every change: python setup.py develop. Unfortunately, this doesn't seem to work with resources defined in package_data.

See https://github.com/plotly/dash-components-archetype/issues/20

Installing python package locally

Before publishing to PyPi, you can test installing the module locally:

# Install in `site-packages` on your machine
$ npm run install-local

Uninstalling python package locally

$ npm run uninstall-local

Publishing

For now, multiple steps are necessary for publishing to NPM and PyPi, respectively. TODO: #5 will roll up publishing steps into one workflow.

Ask @chriddyp to get NPM / PyPi package publishing accesss.

  1. Preparing to publish to NPM

     # Bump the package version
     $ npm version major|minor|patch
    
     # Push branch and tags to repo
     $ git push --follow-tags
  2. Preparing to publish to PyPi

     # Bump the PyPi package to the same version
     $ vi setup.py
    
     # Commit to github
     $ git add setup.py
     $ git commit -m "Bump pypi package version to vx.x.x"
  3. Publish to npm and PyPi

     $ npm run publish-all

Builder / Archetype

We use Builder to centrally manage build configuration, dependencies, and scripts.

To see all builder scripts available:

$ builder help

See the dash-components-archetype repo for more information.