jetpacker 0.1.0 → 0.2.0

data/lib/install/examples/angular/hello_angular/app/app.module.ts

@@ -0,0 +1,16 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

data/lib/install/examples/angular/hello_angular/index.ts

@@ -0,0 +1,8 @@
+import './polyfills.ts';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+document.addEventListener('DOMContentLoaded', () => {
+  platformBrowserDynamic().bootstrapModule(AppModule);
+});

data/lib/install/examples/angular/hello_angular/polyfills.ts

@@ -0,0 +1,73 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** Evergreen browsers require these. **/
+import 'core-js/es/reflect';
+import 'core-js/proposals/reflect-metadata';
+
+
+/**
+ * Required to support Web Animations `@angular/animation`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';
+// import 'zone.js/dist/long-stack-trace-zone' // async stack traces with zone.js
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';

data/lib/install/examples/coffee/hello_coffee.coffee

@@ -0,0 +1,4 @@
+# Run this example by adding <%= javascript_pack_tag 'hello_coffee' %> to the head of your layout file,
+# like app/views/layouts/application.html.erb.
+
+console.log 'Hello world from coffeescript'

data/lib/install/examples/elm/Main.elm

@@ -0,0 +1,55 @@
+module Main exposing (..)
+
+import Browser
+import Html exposing (Html, h1, text)
+import Html.Attributes exposing (style)
+
+-- MODEL
+
+type alias Model =
+  {
+  }
+
+-- INIT
+
+init : (Model, Cmd Message)
+init =
+  (Model, Cmd.none)
+
+-- VIEW
+
+view : Model -> Html Message
+view model =
+  -- The inline style is being used for example purposes in order to keep this example simple and
+  -- avoid loading additional resources. Use a proper stylesheet when building your own app.
+  h1 [style "display" "flex", style "justify-content" "center"]
+     [text "Hello Elm!"]
+
+-- MESSAGE
+
+type Message
+  = None
+
+-- UPDATE
+
+update : Message -> Model -> (Model, Cmd Message)
+update message model =
+  (model, Cmd.none)
+
+-- SUBSCRIPTIONS
+
+subscriptions : Model -> Sub Message
+subscriptions model =
+  Sub.none
+
+-- MAIN
+
+main : Program (Maybe {}) Model Message
+main =
+  Browser.element
+    {
+      init = always init,
+      view = view,
+      update = update,
+      subscriptions = subscriptions
+    }

data/lib/install/examples/elm/hello_elm.js

@@ -0,0 +1,16 @@
+// Run this example by adding <%= javascript_pack_tag "hello_elm" %> to the
+// head of your layout file, like app/views/layouts/application.html.erb.
+// It will render "Hello Elm!" within the page.
+
+import {
+  Elm
+} from '../Main'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const target = document.createElement('div')
+
+  document.body.appendChild(target)
+  Elm.Main.init({
+    node: target
+  })
+})

data/lib/install/examples/erb/hello_erb.js.erb

@@ -0,0 +1,6 @@
+// Run this example by adding <%%= javascript_pack_tag 'hello_erb' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. Don't forget to uncomment erb tag after adding it to your layout file.
+
+<% name = 'Erb' %>
+
+console.log('Hello world from <%= name %>')

data/lib/install/examples/react/babel.config.js

@@ -0,0 +1,87 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(currentEnv) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current'
+          },
+          modules: 'commonjs'
+        },
+        '@babel/preset-react'
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          corejs: 3,
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
+      [
+        '@babel/plugin-proposal-class-properties',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-object-rest-spread',
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false
+        }
+      ],
+      [
+        '@babel/plugin-transform-regenerator',
+        {
+          async: false
+        }
+      ],
+      isProductionEnv && [
+        'babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

data/lib/install/examples/react/hello_react.jsx

@@ -0,0 +1,26 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
+// of the page.
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+const Hello = props => (
+  <div>Hello {props.name}!</div>
+)
+
+Hello.defaultProps = {
+  name: 'David'
+}
+
+Hello.propTypes = {
+  name: PropTypes.string
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Hello name="React" />,
+    document.body.appendChild(document.createElement('div')),
+  )
+})

data/lib/install/examples/react/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "dom"],
+    "module": "es6",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "target": "es5",
+    "jsx": "react"
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "node_modules",
+    "vendor",
+    "public"
+  ],
+  "compileOnSave": false
+}

data/lib/install/examples/stimulus/application.js

@@ -0,0 +1 @@
+import "controllers"

data/lib/install/examples/stimulus/controllers/hello_controller.js

@@ -0,0 +1,18 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = [ "output" ]
+
+  connect() {
+    this.outputTarget.textContent = 'Hello, Stimulus!'
+  }
+}

data/lib/install/examples/stimulus/controllers/index.js

@@ -0,0 +1,9 @@
+// Load all the controllers within this directory and all subdirectories. 
+// Controller files must be named *_controller.js.
+
+import { Application } from "stimulus"
+import { definitionsFromContext } from "stimulus/webpack-helpers"
+
+const application = Application.start()
+const context = require.context("controllers", true, /_controller\.js$/)
+application.load(definitionsFromContext(context))

data/lib/install/examples/svelte/app.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let name;
+</script>
+
+<style>
+  h1 {
+    color: #FF3E00;
+  }
+</style>
+
+<h1>Hello {name}!</h1>

data/lib/install/examples/svelte/hello_svelte.js

@@ -0,0 +1,20 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_svelte' %> (and
+// <%= stylesheet_pack_tag 'hello_svelte' %> if you have styles in your component)
+// to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// All it does is render <div>Hello Svelte!</div> at the bottom of the page.
+
+import App from '../app.svelte'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new App({
+    target: document.body,
+    props: {
+      name: 'Svelte'
+    }
+  });
+
+  window.app = app;
+})
+

data/lib/install/examples/typescript/hello_typescript.ts

@@ -0,0 +1,4 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_typescript' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+
+console.log('Hello world from typescript');

data/lib/install/examples/typescript/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": ["es6", "dom"],
+    "module": "es6",
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+        "*": ["node_modules/*", "app/javascript/*"]
+    },
+    "sourceMap": true,
+    "target": "es5"
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "node_modules",
+    "vendor",
+    "public"
+  ],
+  "compileOnSave": false
+}

data/lib/install/examples/vue/app.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="app">
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {
+      message: "Hello Vue!"
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>