🙋: Ignore certain code sections #357

agauniyal · 2017-12-20T08:28:29Z

🙋

Sometimes there are code portions that I don't want parcel to parse and completely ignore them while acting normally on rest of the file. An example is embedding monaco-editor where index.html code looks like -

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

<!-- I want this section to be ignored by parcel -->
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
	require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
	require(['vs/editor/editor.main'], function() {
		var editor = monaco.editor.create(document.getElementById('container'), {
			value: [
				'function x() {',
				'\tconsole.log("Hello world!");',
				'}'
			].join('\n'),
			language: 'javascript'
		});
	});
</script>
<!-- Section End -->

<!-- This should work normally -->
<script src="./index.js"></script>

</body>
</html>

🤔 Expected Behavior

Parcel should be able to ignore certain sections.

😯 Current Behavior

It'll try parsing the file but would not do it the right way so browser errors out. This is because monaco-editor has a long standing issue here - microsoft/monaco-editor#18 and I manually copy node_modules/monaco-editor to public directory in my build step.

💁 Possible Solution

Use comments to inform parcel.js to ignore these sections(like eslint does)..

🔦 Context

Showstopper for me because I can't migrate to parcel.

🌍 Your Environment

Software	Version(s)
Parcel	1.2.1
Node	9.3.0
npm/Yarn	1.3.2
Operating System	Arch Linux

The text was updated successfully, but these errors were encountered:

rondonjon · 2017-12-20T13:07:57Z

Sounds very much like an edge-case to me. You could achieve the same with a custom preprocessor.

shawwn · 2017-12-21T01:01:38Z

During html parsing, we could skip nodes that set the attribute data-parcel="false".

That would be a decent design choice because we could extend it to data-parcel="process.env.NODE_ENV === 'production'" if necessary.

jdanyow · 2017-12-24T15:19:18Z

@agauniyal here's a workaround for monaco (using cdn). Not pretty but gets around the conflict between the monaco loader's require and parcel's require.

const cdnBase = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.10.1/min';

fetch(`${cdnBase}/vs/loader.js`, { mode: 'cors' })
  .then(response => response.text())
  .then(text => {
    const monacoLoader = {} as any;
    window.monacoLoader = monacoLoader;
    text = text
      .replace(/var\s+_amdLoaderGlobal\s*=\s*this/, 'var _amdLoaderGlobal = window.monacoLoader')
      .replace(/this\.isNode\s*=\s*e\.isNode/, 'this.isNode = false');
    eval(text);
    monacoLoader.require.config({ paths: { 'vs': `${cdnBase}/vs` } });
    window.define = monacoLoader.define;
    window.MonacoEnvironment = {
      getWorkerUrl: () => URL.createObjectURL(new Blob([loaderProxyScript], { type: 'application/javascript' }))
    };
    monacoLoader.require(['vs/editor/editor.main'], () => {
      const editor = monaco.editor.create(document.getElementById('container')!, {
        value: [
          'function x() {',
          '\tconsole.log("Hello world!");',
          '}'
        ].join('\n'),
        language: 'javascript'
      });
    });
  });

interface Window {
  define: any;
  monacoLoader: {
    define: any;
    require: any;
  },
  MonacoEnvironment: any;
}

const loaderProxyScript = `self.MonacoEnvironment = {
    baseUrl: '${cdnBase}'
};
importScripts('${cdnBase}/vs/base/worker/workerMain.js');`

danmarshall · 2018-03-14T19:25:29Z

@agauniyal I had the same problem, I'm also trying to use Monaco. Coincidentally, today they just fixed microsoft/monaco-editor#18 👍
However, Monaco workers also need to be bundled. Monaco is loading worker bundles by URL. @alexandrudima has provided examples 👍 how to do this with Webpack, but I have yet to figure out how to get these to work with Parcel.

nvenegas · 2018-04-05T01:36:13Z

I think I'm running into the same issue:

I want to output an <iframe> with the srcdoc attribute being the contents of a (local to the package) file that would otherwise have been referenced via the src attribute directly.

I end up with a compiled file where srcdoc contains a reference to a script:

<script type="text/javascript" src="./one.js"></script>

and parcel's resolution of the "./one.js" inside the srcdoc attribute fails.

The behaviour I want is for parcel to not reach into srcdoc at all.

fathyb · 2018-04-05T07:55:46Z

Monaco-Editor now supports Parcel, even with workers. See microsoft/vscode#46032 and microsoft/monaco-editor#774

danmarshall · 2018-04-06T01:47:50Z

@fathyb would you mind taking a look at my sample in https://github.com/Microsoft/monaco-editor-samples/blob/master/browser-esm-parcel/index.html - and letting me know if there is a better way to build and refer to the worker?

fathyb · 2018-04-07T23:24:22Z

@danmarshall it doesn't look like it's been released to npm yet. Any idea when the next release is?

Once it gets released you could do (without the build node_modules/monaco-editor/esm/vs/editor/editor.worker.js command) :

self.MonacoEnvironment = {
	getWorker: function (moduleId, label) {
            return new Worker('./node_modules/monaco-editor/esm/vs/editor/editor.worker')
        }
}

You can try it by applying the PR manually by overwriting node_modules/monaco-editor/esm/vs/base/worker/defaultWorkerFactory.js beginning to this :

import { globals } from '../common/platform.js';
import { logOnceWebWorkerWarning } from '../common/worker/simpleWorker.js';
function getWorker(workerId, label) {
        // Option for hosts to overwrite the worker script (used in the standalone editor)
        if (globals.MonacoEnvironment) {
                if (typeof globals.MonacoEnvironment.getWorker === 'function') {
                        return globals.MonacoEnvironment.getWorker(workerId, label);
                }
                if (typeof globals.MonacoEnvironment.getWorkerUrl === 'function') {
                        return new Worker(globals.MonacoEnvironment.getWorkerUrl(workerId, label));
                }
        }
        throw new Error(`You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker`);
}
var WebWorker = /** @class */ (function () {
    function WebWorker(moduleId, id, label, onMessageCallback, onErrorCallback) {
        this.id = id;
        this.worker = getWorker('workerMain.js', label);

new Worker('monaco-editor/esm/vs/editor/editor.worker') doesn't work while new Worker('./node_modules/monaco-editor/esm/vs/editor/editor.worker') works, not sure if it's intended or a bug. It yields this : (cc @devongovett)

🚨  /~/browser-esm-parcel/index.js:107:20:
Cannot resolve dependency './monaco-editor/esm/vs/editor/editor.worker'
at '/~/browser-esm-parcel/monaco-editor/esm/vs/editor/editor.worker'

danielo515 · 2018-08-20T13:27:01Z

I am also interested on this functionality.
In my case I want to leave some sections of the html file with template sections that I will then render on the server. The proposed approach seems fine to me, or even better using the data attributes of the tags.
This is not an edge case at all, I think it is a nice yet simple feature that could open a world of possibilities.

Regards

brandon93s added the 🙋‍♀️ Feature label Dec 28, 2017

DeMoorJasper mentioned this issue Dec 31, 2017

[WIP/RFC] .parcelignore #448

Closed

3 tasks

DeMoorJasper mentioned this issue Apr 2, 2018

how to exclude one module #1116

Closed

DeMoorJasper mentioned this issue May 17, 2018

How can i ignore bundling of images? #1379

Closed

siamkreative mentioned this issue Nov 24, 2018

Fix parcel build issue: empty SVG siamkreative/alex-portfolio#20

Closed

mischnic mentioned this issue Dec 15, 2019

Script tag in HTML #3915

Closed

mischnic mentioned this issue Aug 5, 2020

Ignore certain link targets in HTML href #1186

Open

This was referenced Apr 30, 2021

[Parcel 2] build breaks inline script tag for external library #6213

Closed

Need a way to escape {{ }} characters. #6233

Closed

mischnic mentioned this issue Mar 22, 2022

Parcel cannot handle scripts with type="plain/text" #7696

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🙋: Ignore certain code sections #357

🙋: Ignore certain code sections #357

agauniyal commented Dec 20, 2017

rondonjon commented Dec 20, 2017

shawwn commented Dec 21, 2017

jdanyow commented Dec 24, 2017 •

edited

Loading

danmarshall commented Mar 14, 2018

nvenegas commented Apr 5, 2018 •

edited

Loading

fathyb commented Apr 5, 2018 •

edited

Loading

danmarshall commented Apr 6, 2018

fathyb commented Apr 7, 2018 •

edited

Loading

danielo515 commented Aug 20, 2018

🙋: Ignore certain code sections #357

🙋: Ignore certain code sections #357

Comments

agauniyal commented Dec 20, 2017

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

🌍 Your Environment

rondonjon commented Dec 20, 2017

shawwn commented Dec 21, 2017

jdanyow commented Dec 24, 2017 • edited Loading

danmarshall commented Mar 14, 2018

nvenegas commented Apr 5, 2018 • edited Loading

fathyb commented Apr 5, 2018 • edited Loading

danmarshall commented Apr 6, 2018

fathyb commented Apr 7, 2018 • edited Loading

danielo515 commented Aug 20, 2018

jdanyow commented Dec 24, 2017 •

edited

Loading

nvenegas commented Apr 5, 2018 •

edited

Loading

fathyb commented Apr 5, 2018 •

edited

Loading

fathyb commented Apr 7, 2018 •

edited

Loading