node-sanitize-filename icon indicating copy to clipboard operation
node-sanitize-filename copied to clipboard

Browser Usage?

Open skipjack opened this issue 7 years ago • 5 comments

Is this package safe to use in a browser environment? By the name I was a bit worried (node-sanitize-filename) but it doesn't seem any of the deps are node dependent and, after double checking my webpack bundles, it doesn't seem like library size is an issue (minimized it added only about 2kb to my output). I also read through the code and don't see it using any node built-ins like path or fs.

Just wanted to check before using in a SPA so I don't run into any surprises. Also, if it's not node dependent, and you don't foresee it being so in the future, maybe it's worth renaming the package to just "sanitize-filename" so other folks don't get tripped up by that? I could see this package being useful in a variety of applications both front-end and back-end. There's a lot of questions on stack overflow pertaining to this (which is fact how I came here) and it would be nice to depend on a small package like this that's actively maintained instead of just copying and pasting regexes.

skipjack avatar Apr 10 '17 19:04 skipjack

Yes, this package is definitely safe for use in a browser environment! It even gets tested in browsers! The package name is already sanitize-filename on npm -- this github repo is just prefixed with node-.

A note in the readme about browser usage would be good to have.

parshap avatar Jul 05 '17 05:07 parshap

@parshap thanks for the response. Yeah, it was just the repo name that threw me off. Seeing as changing the repo name wouldn't be much of a breaking change, you may want to consider that. But yeah a note in the readme would be nice as well.

skipjack avatar Jul 05 '17 16:07 skipjack

When I try to use it in browser, I get the error

ReferenceError: Buffer is not defined

But, Buffer is a node library. This is coming from the dependency truncate-utf8-bytes (index.js): var getLength = Buffer.byteLength.bind(Buffer); ( https://github.com/parshap/truncate-utf8-bytes/blob/c8fcebc8be093c8bd8db1e7d75c09b9fce7e4708/index.js#L4 )

FWIW, I'm using rollup w/ the resolve and CJS plugins:

            plugins:  [
                resolve({
                    jsnext: true,
                    main:   true,
                }),

                commonjs({
                    include:  'node_modules/**',
                }),

                // others...
            ]

jslick avatar Aug 14 '17 01:08 jslick

@jslick: You'll need some implementation of the node core modules. Browserify and Webpack do this, I'm not sure what the right solution for Rollup is.

parshap avatar Aug 14 '17 02:08 parshap

Thanks parshap. I found the solution. It turns out, truncate-utf8-bytes specifies pkg.browser, which specifies a file that omits Node dependencies. I just had to add browser: true to my rollup resolve plugin.

jslick avatar Aug 14 '17 04:08 jslick