Typescript: एमिट खाली लाइनों को संरक्षित नहीं करता है

कुछ पृष्ठभूमि जानकारी जोड़ना ... नया कंपाइलर सभी रिक्त लाइनों को हटाने का कारण यह है कि यह केवल एक चीज है जिसे हम _consistently_ कर सकते हैं। खाली लाइन परिरक्षण हमेशा एक हिट या मिस चीज होने वाली है जब यह उन निर्माणों की बात आती है जो पुनर्लेखन, जैसे वर्ग और मॉड्यूल घोषणाओं के अधीन होते हैं। हम टिप्पणी संरक्षण के साथ ठीक उसी मुद्दे का सामना करते हैं। इसलिए, जब मैं इसे हल करने के लिए सहानुभूति रखता हूं, तो ऐसा करना आसान बात नहीं है।

@NoelAbrahams मैं उत्सुक हूं कि डिबगिंग करते समय आप कौन से मुद्दे देखते हैं?

@ahejlsberg @NoelAbrahams I ने मूल कोडप्लेक्स परियोजना में उत्सर्जित एक प्रोटोटाइप बनाया जो वास्तव में टिप्पणी और newline संरक्षण के साथ एक भयानक काम किया। यहां तक ​​कि उन निर्माणों पर भी, जिन्हें भारी पुनर्लेखन किया गया था (जैसे अभिव्यक्तियों को कार्य करने के लिए तीर-फ़ंक्शन) यह लगभग हमेशा वही करेगा जो आप सहज रूप से करने की अपेक्षा करते हैं।

लाइन परिरक्षण ज्यादातर पुराने कोड के संरक्षण और रूपांतरण करते समय सापेक्ष रिक्ति का उपयोग करते हुए लाइन के पुन: उपयोग का एक कार्य है। यदि आपके पास है:

module M {
}
module N {
}

फिर जब आप 'एन' के लिए आईआईएफई का उत्सर्जन कर रहे हैं तो आप कहते हैं "हमें उस मॉड्यूल के बीच ट्रिविया रखना चाहिए जिसे हम फिर से लिख रहे हैं और पिछले सिंटैक्टिक तत्व"।

यहां पहले / बाद में बताया गया है कि मेरे उत्सर्जक प्रोटोटाइप ने किस तरह काम किया कि संरक्षित टिप्पणियां / निष्ठा उच्च स्तर के साथ

https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter2/ecmascript5/Parser.ts
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter2/ecmascript5/Parser.ts.expected

आप यहाँ बहुत सारे उदाहरण देख सकते हैं:
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter/ecmascript5/

एकमात्र विशेषता जिसे मैंने लागू नहीं किया वह था 'संरेखण'। यानी यदि आपके पास ऐसा कोड था जिसे मूल (पैरामीटर घोषणाओं के साथ बहुत सामान्य) में किसी तरह से संरेखित किया गया था, तो हम चाहते हैं कि उत्सर्जित कोड को भी संरक्षित किया जाए।

लेकिन ऐसा करना बहुत तुच्छ होता।

इसने कहा, टीएस से जेएस तक के रूपांतरणों ने इंडेंटेशन को संरक्षित करने का प्रयास किया। आप यहाँ देख सकते हैं कि:
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter/ecmascript5/ClassDeclaration/ClassDeclaration2.ts
https://typescript.codeplex.com/SourceControl/latest#tests/Fidelity/emitter/ecmascript5/ClassDeclaration/ClassDeclaration2.ts.expected

ध्यान दें कि कैसे बयानों को ठीक से (कई पंक्तियों में फैलने पर भी) हम नेस्टेड मॉड्यूल और वर्ग को आईआईएफ में बदल देते हैं

@ahejlsberg , ब्राउज़र में डीबगिंग के दौरान कोई महत्वपूर्ण समस्या नहीं है। यह सिर्फ जावास्क्रिप्ट कोड नेविगेट करने और ब्रेकपॉइंट्स की स्थापना के लिए लाइनों का पता लगाने में आसान बनाता है जब वास्तविक टाइपस्क्रिप्ट स्रोत कोड के साथ एक सटीक पत्राचार होता है।

मैं व्यक्तिगत रूप से खाली लाइनों के बिना रह सकता था, लेकिन जब से टीएस को संरक्षित करने और उत्सर्जन करने के लिए इतनी लंबाई चली गई है कि _beautiful _ JavaScript (: मुस्कान :) यह केवल प्राकृतिक लगता है कि इसे लागू किया गया है।

@ahejlsberg @NoelAbrahams एक ऐसा मुद्दा है जो ब्राउज़र में डिबगिंग के साथ मौजूद है जो इस वार्तालाप से थोड़ा संबंधित है। जब सेटर / गेट्टर चेन्स (जैसे jquery के साथ) या चेनिंग वादों का उपयोग किया जाता है, तो अनुवाद के दौरान नई लाइन फीड खो जाती है। यह कहा जा रहा है, यह एक विशाल दर्द बिंदु है जब एरो फ़ंक्शंस के साथ काम करना।

उदाहरण के तौर पे:

(<any> x).a('#test')
    .b('test')
    .c(() => 'foo')
    .d(() => 'bar')
    .e(() => 5)
    .f(() => 6);

हो जाता है:

x.a('#test').b('test').c(function () { return 'foo'; }).d(function () { return 'bar'; }).e(function () { return 5; }).f(function () { return 6; });

Chrome और sourceMaps का उपयोग करते हुए, ब्रेकप्वाइंट अभी भी छोड़ दिया गया है।

http://www.typescriptlang.org/Playground#src = (% 3Cany% 3E% 20x) .a ('% 23test')% 0A% 20% 20% 20% 20% 20.b ('परीक्षण')% 0A% 09.c (()% 20% 3 डी% 3E% 20'foo ')% 0A% 09.d (()% 20% 3 डी% 3E% 20'bar')% 0A% 09.e (() 20% % 3 डी% 3E% 205)% 0A% 09.f (()% 20% 3 डी% 3E% 206)% 3 बी

@mtraynham , वास्तव में मुझे लगता है कि आप जिस समस्या को उजागर करते हैं वह थोड़ा अलग है।

पिछले संस्करणों में इनलाइन फ़ंक्शन का शरीर हमेशा नई लाइनों पर उत्सर्जित होता था:

// TS
var x = () => 'foo';

// JS - old
var x = function () { 
             return 'foo'; 
       };

// JS - new
var x = function () { return 'foo'; };

मैंने भी इसे एक समस्या के रूप में पाया है - कभी-कभी वापस जाने और function ताकि मैं ब्राउज़र में डीबगिंग के समय एक ब्रेकपॉइंट सेट कर सकूं।

@NoelAbrahams आह, मैं इस सटीक उसी अस्थायी समाधान का उपयोग कर रहा हूं ... मुझे यकीन नहीं था कि क्या इस समस्या में योगदान देने के लिए एक उपयुक्त बग था (लाइन फीड्स का उन्मूलन), या मुझे एक और खोलना चाहिए?

मैंने अलग मुद्दे पर # 2259 बनाया।

एक इंजीनियरिंग निदेशक के रूप में नई लाइन की क्षमता टाइप करने के लिए हमारे जावास्क्रिप्ट डेवलपमेंट कम्युनिटी की खोज करने से वास्तव में मदद मिलेगी। टाइपस्क्रिप्ट की प्राथमिक अपील में से एक टाइपस्क्रिप्ट जनरेटस्क्रिप्ट में निर्मित कोड की पठनीयता और संरचना को बनाए रखना था।

टिप्पणियों को देखने के लिए महान हाल के अद्यतन और "--removeComments" कमांड लाइन के निर्देश के अलावा में रखा जाता है।

मैं @timjmartel के समान कारण के लिए भी इसे पसंद

अगर हमारी टीम ने कभी टीएस का परित्याग करने का फैसला किया और बदले हुए जेएस के साथ जारी रखा तो मानव-हितैषी व्हाट्सएप होने पर उत्सर्जित जेएस स्रोतों को अपनाना ज्यादा आसान होगा।

खाली लाइनों के संबंध में, क्या यह संभव होगा - अभी के लिए - उन्हें उत्सर्जित करने के लिए, भले ही वे हिट या मिस हों? इस तरह के प्रायोगिक फीचर को "--keepEmptyLines" विकल्प के साथ पूछा जा सकता है। यह बहुत अच्छा JS होने के लिए नहीं होगा, लेकिन अधिक पठनीय JS होने के लिए।

जंजीर फ़ंक्शन कॉल के संबंध में, क्या उपयोगकर्ताओं को ब्रेकपॉइंट सेट करने देने के लिए लाइन के लिए एक कॉल करना संभव होगा? फिर, इस सुविधा को "--oneCallForLine" विकल्प के साथ पूछा जा सकता है, अगर यह एक और "हिट या मिस" चीज है।

ध्यान देने के लिए आपको धन्यवाद।

वास्तव में, जंजीर फ़ंक्शन कॉल को स्रोत कोड ब्यूटिफायर द्वारा विभाजित किया जा सकता है, इसलिए टाइपस्क्रिप्ट में ऐसी सुविधा को एम्बेड करने का कोई मतलब नहीं है।

यह इतना कठिन नहीं होना चाहिए, बस tsconfig.json में एक विकल्प नहीं होना चाहिए

preserveWhitespace: true/false

?

लेकिन मैं इसे एक संकलक विकल्प के रूप में नहीं देख रहा हूं: https://www.typescriptlang.org/docs/handbook/compiler-options.html

मुझे अभी एहसास हुआ। व्हाट्सएप न रखने का एक अच्छा कारण यह है कि यह वास्तव में आपको .ts के बजाय गलती से .js को संपादित करने से रोकने में मदद करेगा। मुझे लगता है कि एक बात करने के लिए बाहर .js फ़ाइलों के रूप में केवल पढ़ने / निष्पादित करने के लिए होगा। तो शायद यह एक गैर-मुद्दा है।

कहा जा रहा है, मुझे नहीं लगता कि tsc केवल .js फ़ाइलों को ही लिखता है / केवल निष्पादित करता है, क्या ऐसा करने के लिए tsc को कॉन्फ़िगर करने का कोई तरीका है?

अभी नहीं। हालांकि उस के लिए एक अलग मुद्दा खोलने के लिए स्वतंत्र महसूस करें।

@DanielRosenwasser आप कह रहे हैं कि अगर हम

यह अच्छा होगा।

+1

+1

+1

भीड़ preserveWhitespace: true/false चाहती है
@ORESoftware ++

कारण यह महत्वपूर्ण है कि टाइपस्क्रिप्ट जेएस को "नीचा दिखाने" के लिए माना जाता है। अभी यह नई पंक्तियों को संरक्षित करने के लिए जेएस को पढ़ने के लिए थोड़ा घना नहीं बना सकता है, खासकर यदि आप टाइपस्क्रिप्ट लिखते हैं, लेकिन आपको जेएस को किसी अन्य स्थान पर वितरित करना है।

+1 preserveWhitespace: true/false

अस्थायी हैक

लाइनब्रीक को जोड़ने के लिए

निम्न कॉन्फ़िगरेशन फ़ाइल के साथ:

{
  "lineBreak": {
    "before": {
      "FunctionDeclaration": ">=2",
      "FunctionDeclarationOpeningBrace": 0,
      "FunctionDeclarationClosingBrace": 1,
      "MethodDefinition": ">=2",
      "ClassDeclaration": ">=2"
    },
    "after": {
      "FunctionDeclaration": ">=2",
      "FunctionDeclarationOpeningBrace": 1,
      "MethodDefinitionClosingBrace": ">=2",
      "ClassClosingBrace": ">=2"
    }
  }
}

@mtraynham आपका उदाहरण:

(<any> x).a('#test')
    .b('test')
    .c(() => 'foo')
    .d(() => 'bar')
    .e(() => 5)
    .f(() => 6);

नवीनतम संकलक के साथ यह जेएस पैदा करता है:

x.a('#test')
    .b('test')
    .c(function () { return 'foo'; })
    .d(function () { return 'bar'; })
    .e(function () { return 5; })
    .f(function () { return 6; });

(देखें TS PlayGround https://goo.gl/JViurr)

टीएस संस्करण 1.1 (टाइपस्क्रिप्ट के संस्करण जिसके लिए यह मुद्दा बनाया गया था) के बाद से बहुत कुछ बदल गया है। शायद यह मुद्दा बंद हो सकता है? @ हेजेल्सबर्ग ?

@ वलेरा-रज़ुवन मैंने इसके बजाय # 2259 खोला था। मेरा मुद्दा लाइन फीड से संबंधित था, लेकिन इस बग द्वारा वर्णित सटीक समान समस्या नहीं थी। # 2259 को कुछ समय पहले (मई 2015) बंद कर दिया गया था।

यह ब्रिल- एंड्री एफ़ॉर्मेटर कॉन्फ़िगरेशन है, लेकिन एक बग के साथ, (जब वर्ग घोषणा में शब्द आयात होता है तो कोई लाइन ब्रेक नहीं था):

{
    "lineBreak": {
        "before": {
            "FunctionDeclaration": ">=2",
            "FunctionDeclarationOpeningBrace": 0,
            "FunctionDeclarationClosingBrace": 1,
            "MethodDefinition": ">=2",
            "ClassDeclaration": ">=2",
            "ExportNamedDeclaration": 2
        },
        "after": {
            "FunctionDeclaration": ">=2",
            "FunctionDeclarationOpeningBrace": 1,
            "MethodDefinitionClosingBrace": ">=2",
            "ClassClosingBrace": ">=2"
        }
    }
}

मुझे नहीं लगता कि esformatter का उपयोग करने से पूरी समस्या हल हो जाती है। निश्चित रूप से, यह स्वचालित रूप से फ़ंक्शंस आदि के आसपास खाली लाइनें सम्मिलित कर सकता है, लेकिन मेरे लिए, फ़ंक्शंस के भीतर रिक्त लाइनें और भी महत्वपूर्ण हैं। हम गद्य में पैराग्राफ की तरह रिक्त लाइनों का उपयोग करते हैं: व्यक्तिगत विचारों को समूहित करने के लिए।

फ़ंक्शंस के भीतर वे रिक्त लाइनें फ़ंक्शन की संरचना को संप्रेषित करने में मदद करती हैं। उनके बिना, मुझे लगता है कि पठनीयता ग्रस्त है।

@ahejlsberg मैं ts-jest का उपयोग करते समय अपनी यूनिट परीक्षण आउटपुट में गलत लाइन नंबर देख रहा हूं, और यह मुद्दा js आउटपुट में खाली लाइनों को हटाने के कारण लगता है। मैं उत्सुक हूं कि इन लाइनों को अंतिम जेएस में छोड़ना इतना मुश्किल क्यों है। क्या इस पर कोई और जानकारी है? क्या ऐसा करने के लिए हम किसी तरह मदद कर सकते हैं? :)

या इसे पहले ही विलय कर दिया गया है और अभी तक जारी नहीं किया गया है? -> V4 अगला बड़ा संस्करण # 3143

@JimTheMan यदि आप स्रोत मानचित्रों का उपयोग करते हैं तो शायद source-map-support पैकेज आपको आउटपुट में सही स्टैक के निशान प्राप्त करने में मदद कर सकता है।

मैं इस मुद्दे में भी भागता हूं। मैं एक अलग पैच बनाकर वर्कअराउंड के साथ आया और पैच में व्हॉट्सएप के बदलावों को वापस लाया। jsdiff आपको एक संरचित पैच ऑब्जेक्ट बनाने और अपनी इच्छानुसार उसमें हेरफेर करने की अनुमति देता है।

import * as diff from 'diff';

const patch =
      diff.parsePatch(diff.createPatch('file', oldText, newText, '', ''));
const hunks = patch[0].hunks;
for (let i = 0; i < hunks.length; ++i) {
  let lineOffset = 0;
  const hunk = hunks[i];
  hunk.lines = hunk.lines.map(line => {
    if (line === '-') {
      lineOffset++;
      return ' ';
    }
    return line;
  });
  hunk.newLines += lineOffset;
  for (let j = i + 1; j < hunks.length; ++j) {
    hunks[j].newStart += lineOffset;
  }
}
return diff.applyPatch(oldText, patch);

इस समाधान के साथ, आप मूल फ़ाइल से सभी पंक्ति विराम सुरक्षित कर सकते हैं।

@zeroliu क्या संकलन चरण में ध्यान देने योग्य समय विलंब का परिचय देता है?

@ahejlsberg क्या आपको लगता है कि यह इस मुद्दे को ठीक करने लायक है?

आपके प्रोजेक्ट के आकार के आधार पर @ वेलेरा-रोज़्वान। मेरे उपयोग के मामलों के लिए जहां मैं 100-1000 LOC की 10-ish फ़ाइलों को ट्रांसपाइल करता हूं, यह किसी भी ध्यान देने योग्य देरी का परिचय नहीं देता है।

अभी तक यहाँ कोई समाधान? मैं इस मुसीबत में भी भागता हूँ ...

जब मैं अपनी टीम के साथी @emadum ने मुझे याद दिलाया कि

const gulp = require('gulp');
const ts = require('gulp-typescript');
const through = require('through2');

function preserveNewlines() {
  return through.obj(function(file, encoding, callback) {
    const data = file.contents.toString('utf8');
    const fixedUp = data.replace(/\n\n/g, '\n/** THIS_IS_A_NEWLINE **/');
    file.contents = Buffer.from(fixedUp, 'utf8');
    callback(null, file);
  });
}

function restoreNewlines() {
  return through.obj(function(file, encoding, callback) {
    const data = file.contents.toString('utf8');
    const fixedUp = data.replace(/\/\*\* THIS_IS_A_NEWLINE \*\*\//g, '\n');
    file.contents = Buffer.from(fixedUp, 'utf8');
    callback(null, file);
  });
}

gulp.task('default', function () {
  return gulp.src('src/**/*.ts')
    .pipe(preserveNewlines())
    .pipe(ts({
      removeComments: false
    }))
    .pipe(restoreNewlines())
    .pipe(gulp.dest('lib'));
});

मुझे लगता है कि अधिक चतुर टिप्पणी कुछ झूठी सकारात्मकता को रोक सकती है, लेकिन यह आज हमारे लिए अच्छा काम करती है। मैंने केवल एक अपेक्षाकृत छोटी फ़ाइल पर इसका परीक्षण किया है, लेकिन प्रदर्शन ओवरहेड न्यूनतम था।

hth

@mbroadst

मैंने एक आधार के रूप में आपके विचार का उपयोग किया, और अंत में उस पर विस्तार किया जब तक कि यह एक npm मॉड्यूल नहीं बन गया:
https://www.npmjs.com/package/gulp-preserve-typescript-whitespace

मैं Readme में अपनी पोस्ट का श्रेय, उम्मीद है कि आप बुरा मत मानना ​​:)