Importing js lib to Meteor

1

I am trying to import https://prismjs.com/ to Meteor’s client.

I’ve put

prism.js to client\lib\

and

prism.css to client\stylesheets\

and it’s not working. What am I doing wrong?

2

Without looking too closely, it could be that prism.js doesn’t set any global context - in which case you’d need to import the file into wherever you want to use it. Also, depending on your meteor version and setup, the file may not even be loaded unless it’s imported somewhere.

3

you’d need to import the file into wherever you want to use it.

How to do this?

Also, depending on your meteor version and setup, the file may not even be loaded unless it’s imported somewhere.

And how to do that? (Latest Meteor)

4

You may be best served by reading the documentation around imports in meteor and of course the documentation of prism itself (where they will probably have examples of how to use), but in general something like this:

import prism from '/path/to/prism.js'
prism.doSomething();
5

The first line just worked with no other means. Thank you so much!

6

If you want to avoid adding an extra NPM to your project, or storing this lib in the client bundle (size matters) you can load this on demand on the client with something like this below.
When the user gets to the page where this is needed, you can do a load on rendered or componentDidMount(React). This sample code can be reused with URLs as parameters in order to upload multiple libraries and keep you NPM set simple and light.

const loadScript = (scriptUrl, id, integrity) => { // sha for integrity if you want to ensure security of the CDN file
  const script = document.createElement('script')
  script.src = scriptUrl
  script.type = 'text/javascript'
  // script.crossOrigin = 'anonymous'
  if (id) { script.id = id }
  // script.integrity = integritySet[integrity]
  document.body.appendChild(script)

  return new Promise(resolve => {
    script.onload = resolve
    script.onerror = () => console.log('rejected')
  })
}

const addCSS = (css, id, integrity) => {
  if (!document.querySelectorAll(id ? `link[id='${id}']` : `link[href='${css}']`).length) {
    const link = document.createElement('LINK')
    link.rel = 'stylesheet'
    link.type = 'text/css'
    link.href = css
    if (id) { link.id = id }
    // link.crossOrigin = 'anonymous'
    // link.integrity = integritySet[integrity]
    document.head.appendChild(link)
  }
}

const loadPrism = () => {
  if (!window.yourlib) { // avoid loading multiple times
    loadScript('https://your_cdn_file.js')
      .then(() => {
        addCSS('https://your_cdn_file.css')
          .then(() => {
         console.log(window.yourlib)
            }
          })
      })
  }
}
7

Any reason why you don’t want to do this?

meteor npm install prismjs

8

Yes, that works too. But I still have to throw the css file manually, so I think it will be more logical to have it imported like in 1st example.

I have another issue, I need to set a variable to prevent auto running of the Prism script, and I need to issue that before Prism script is loaded, how can it be done?


  window.Prism = window.Prism || {};
  Prism.manual = true;
9

You can import css from a package installed through npm.