Move index.js to web_src and use webpack to pack them (#8598)

* Move index.js to web_src and use webpack

* Fix initHeatMap

* update eslint and move webpack to devDependencies

* update index.js

* add eslint env node

.eslintrc

@@ -10,6 +10,7 @@ env:
   browser: true
   jquery: true
   es6: true
+  node: true
 
 globals:
   Clipboard: false

Makefile

@@ -434,7 +434,8 @@ npm-update: npm-check
 
 .PHONY: js
 js: npm
-	npx eslint public/js
+	npx eslint web_src/js webpack.config.js
+	npx webpack
 
 .PHONY: css
 css: npm

package.json

@@ -12,7 +12,9 @@
     "postcss-cli": "6.1.3",
     "stylelint": "10.1.0",
     "stylelint-config-standard": "18.3.0",
-    "updates": "8.5.3"
+    "updates": "8.5.3",
+    "webpack": "4.41.2",
+    "webpack-cli": "3.3.10"
   },
   "browserslist": [
     "> 1%",

public/js/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./web_src/js/index.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","htmlEncode","text","jQuery","html","csrf","suburl","previewFileModes","simpleMDEditor","codeMirrorEditor","initCommentPreviewTab","$form","$tabMenu","find","tab","data","click","$this","$","this","post","val","$previewPanel","emojify","run","each","hljs","highlightBlock","buttonsClickOnEnter","initEditForm","length","$previewTab","split","initEditPreviewTab","$diffPreviewPanel","initEditDiffTab","updateIssuesMeta","url","action","issueIds","elementId","Promise","resolve","ajax","type","success","reload","window","location","initImagePaste","target","field","addEventListener","event","pasteEvent","callback","clipboardData","items","indexOf","blob","getAsFile","preventDefault","stopPropagation","retrieveImageFromClipboardAsBlob","img","substr","lastIndexOf","selectionStart","startPos","endPos","selectionEnd","substring","insertAtCursor","file","xhr","XMLHttpRequest","onload","status","responseText","open","setRequestHeader","formData","FormData","append","send","uploadFile","res","JSON","parse","oldval","newval","replace","replaceAndKeepCursor","uuid","input","initCommentForm","initListSubmits","selector","outerSelector","$list","$noSelect","$listMenu","hasLabelUpdateAction","labels","dropdown","promises","keys","forEach","label","promise","push","all","then","hasClass","removeClass","addClass","listIds","parent","join","selectItem","select_id","input_id","$menu","hasUpdateAction","$selectBranch","selectedValue","css","initBranchSelector","initRepository","initFilterSearchDropdown","$dropdown","fullTextSearch","selectOnKeydown","onChange","_text","_value","$choice","href","message","noResults","$data","searchTerm","canCreateBranch","menuVisible","active","branch","tag","selected","remove","Vue","delimiters","el","beforeMount","vm","$el","getAttribute","document","body","contains","set","watch","visible","focusSearchField","computed","filteredItems","filter","item","toLowerCase","showCreateNewBranch","showNoResults","methods","prev","getSelected","createNewBranch","$refs","newBranchForm","submit","nextTick","searchField","focus","j","getSelectedIndexInFiltered","scrollToActive","Array","isArray","cont","scrollContainer","offsetTop","scrollTop","clientHeight","keydown","keyCode","keyup","$prompt","toString","show","hide","change","checked","$newLabelPanel","minicolors","color_hex","modal","onApprove","$datepicker","datetimepicker","lang","inline","timepicker","startDate","formatDate","onSelectDate","ct","dateFormat","$issueTitle","$editInput","editTitleToggle","toggle","title","$segment","next","$editContentZone","$renderContent","$rawContent","$textarea","issuesTribute","attach","emojiTribute","$dropzone","$files","filenameDict","dropzone","headers","maxFiles","maxFilesize","acceptedFiles","addRemoveLinks","dictDefaultMessage","dictInvalidFileType","dictFileTooBig","dictRemoveFile","init","on","submitted","_csrf","getJSON","drop","removeAllFiles","empty","imgSrc","emit","files","$editContentForm","attr","$attachments","map","content","$content","attachments","confirm","$statusButton","$mergeButton","e","closest","initReactionSelector","reactions","popup","done","resp","react","insertBefore","appendTo","hasEmoji","$item","addLine","delLine","addPercent","parseFloat","localStorage","setItem","select","$repoComparePull","assingMenuAttributes","menu","id","Math","floor","random","initRepositoryCollaboration","initEditor","prop","$editFilename","$section","$divider","parts","getCursorPosition","last","setSelectionRange","element","trigger","$editArea","markdownFileExts","lineWrapExtensions","spec","extension","extWithDot","dataUrl","apiCall","exec","info","CodeMirror","findModeByExtension","previewLink","mime","toTextArea","SimpleMDE","autoDownloadFontAwesome","forceSync","renderingConfig","singleLineBreaks","indentWithTabs","tabSize","spellChecker","previewRender","plainText","preview","setTimeout","innerHTML","toolbar","setSimpleMDE","fromTextArea","lineNumbers","cm","_change","getValue","setCodeMirror","setOption","autoLoadMode","editorconfig","indent_style","Tab","spaces","parseInt","getOption","replaceSelection","indent_size","tab_width","$commitButton","$editForm","areYouSure","silent","dirtyClass","fieldSelector","dirty","initUserSettings","keypress","initCodeView","$select","siblings","selectRange","shiftKey","eq","getSelection","removeAllRanges","selection","hash","match","$first","offset","top","u2fSigned","stringify","contentType","fail","u2fError","u2fRegistered","errorCode","checkError","errorType","u2fErrors","1","2","3","4","5","u2fRegisterRequest","req","registeredKeys","u2fApi","regisLine truncated

templates/base/footer.tmpl

@@ -129,7 +129,7 @@
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/moment/moment.min.js" charset="utf-8"></script>
 	<script src="{{StaticUrlPrefix}}/vendor/plugins/vue-calendar-heatmap/vue-calendar-heatmap.browser.js" charset="utf-8"></script>
 	<script type="text/javascript">
-		initHeatmap('user-heatmap', '{{.HeatmapUser}}');
+		window.initHeatmap('user-heatmap', '{{.HeatmapUser}}');
 	</script>
 {{end}}
 {{template "custom/footer" .}}

templates/repo/diff/comment_form.tmpl

@@ -39,7 +39,7 @@
 					{{end}}
 				{{end}}
 				{{if or (not $.HasComments) $.hidden}}
-					<button type="button" class="ui submit tiny basic button btn-cancel" onclick="cancelCodeComment(this);">{{$.root.i18n.Tr "cancel"}}</button>
+					<button type="button" class="ui submit tiny basic button btn-cancel" onclick="window.cancelCodeComment(this);">{{$.root.i18n.Tr "cancel"}}</button>
 				{{end}}
 			</div>
 		</div>

templates/repo/issue/view_content/sidebar.tmpl

@@ -155,8 +155,8 @@
 						</form>
 						{{if  $.IsStopwatchRunning}}
 							<div class="ui buttons fluid stop-cancel">
-								<button onclick="this.disabled=true;toggleStopwatch()" class="ui button stop">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
-								<button onclick="this.disabled=true;cancelStopwatch()" class="ui negative button cancel">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
+								<button onclick="this.disabled=true;window.toggleStopwatch()" class="ui button stop">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
+								<button onclick="this.disabled=true;window.cancelStopwatch()" class="ui negative button cancel">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
 							</div>
 						{{else}}
 							{{if .HasUserStopwatch}}
@@ -165,8 +165,8 @@
 								</div>
 							{{end}}
 							<div class="ui buttons two fluid start-add">
-								<button onclick="this.disabled=true;toggleStopwatch()" class="ui button poping up start" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
-								<button onclick="timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
+								<button onclick="this.disabled=true;window.toggleStopwatch()" class="ui button poping up start" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
+								<button onclick="window.timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
 								<div class="ui mini modal">
 									<div class="header">{{.i18n.Tr "repo.issues.add_time"}}</div>
 									<div class="content">
@@ -225,7 +225,7 @@
 					{{end}}
 					{{if and .IsIssueWriter (not .Repository.IsArchived)}}
 						<br/>
-						<a style="cursor:pointer;" onclick="toggleDeadlineForm();"><i class="edit icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_edit"}}</a> -
+						<a style="cursor:pointer;" onclick="window.toggleDeadlineForm();"><i class="edit icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_edit"}}</a> -
 						<a style="cursor:pointer;" onclick="updateDeadline('');"><i class="remove icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_remove"}}</a>
 					{{end}}
 				</p>
@@ -235,7 +235,7 @@
 
 			{{if and .IsIssueWriter (not .Repository.IsArchived)}}
 				<div {{if ne .Issue.DeadlineUnix 0}} style="display: none;"{{end}} id="deadlineForm">
-					<form class="ui fluid action input" action="{{AppSubUrl}}/api/v1/repos/{{.Repository.Owner.Name}}/{{.Repository.Name}}/issues/{{.Issue.Index}}" method="post" id="update-issue-deadline-form" onsubmit="setDeadline();return false;">
+					<form class="ui fluid action input" action="{{AppSubUrl}}/api/v1/repos/{{.Repository.Owner.Name}}/{{.Repository.Name}}/issues/{{.Issue.Index}}" method="post" id="update-issue-deadline-form" onsubmit="window.setDeadline();return false;">
 						{{$.CsrfTokenHtml}}
 						<input required placeholder="{{.i18n.Tr "repo.issues.due_date_form"}}" {{if gt .Issue.DeadlineUnix 0}}value="{{.Issue.DeadlineUnix.Format "2006-01-02"}}"{{end}} type="date" name="deadlineDate" id="deadlineDate">
 						<button class="ui green icon button">
@@ -280,7 +280,7 @@
 								<div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
 								<div class="ui transparent label right floated nopadding">
 									{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
-										<a class="delete-dependency-button" onclick="deleteDependencyModal({{.Issue.ID}}, 'blocking');"
+										<a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blocking');"
 											data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 											<i class="delete icon text red nopadding nomargin"></i>
 										</a>
@@ -307,7 +307,7 @@
 								<div class="text small">{{.Repository.OwnerName}}/{{.Repository.Name}}</div>
 								<div class="ui transparent label right floated nopadding">
 									{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
-										<a class="delete-dependency-button" onclick="deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
+										<a class="delete-dependency-button" onclick="window.deleteDependencyModal({{.Issue.ID}}, 'blockedBy');"
 											data-tooltip="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
 											<i class="delete icon text red nopadding nomargin"></i>
 										</a>

templates/user/auth/signin_inner.tmpl

@@ -65,7 +65,7 @@
 										title="{{$provider.DisplayName}}{{if eq $provider.Name "openidConnect"}} ({{$key}}){{end}}"
 										class="{{$provider.Name}}"
 										src="{{AppSubUrl}}{{$provider.Image}}"
-										onclick="onOAuthLoginClick()"
+										onclick="window.onOAuthLoginClick()"
 									></a>
 							{{end}}
 						</div>

webpack.config.js

@@ -0,0 +1,20 @@
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+  entry: {
+    index: './web_src/js/index.js',
+  },
+  devtool: 'source-map',
+  output: {
+    path: path.resolve(__dirname, 'public/js'),
+    filename: "[name].js"
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin({ 
+        sourceMap: true
+     })],
+  },
+};