Skip to content

Commit 3ee134f

Browse files
akoppelaakoppela
committed
Initial release.
1 parent b0bab88 commit 3ee134f

14 files changed

+3812
-0
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
name: Bug report
3+
about: Create a report to help us improve
4+
5+
---
6+
7+
**Describe the bug**
8+
A clear and concise description of what the bug is.
9+
10+
**To Reproduce**
11+
Steps to reproduce the behavior:
12+
1. Go to '...'
13+
2. Click on '....'
14+
3. Scroll down to '....'
15+
4. See error
16+
17+
**Expected behavior**
18+
A clear and concise description of what you expected to happen.
19+
20+
**Screenshots**
21+
If applicable, add screenshots to help explain your problem.
22+
23+
**Desktop (please complete the following information):**
24+
- OS: [e.g. iOS]
25+
- Browser [e.g. chrome, safari]
26+
- Version [e.g. 22]
27+
28+
**Smartphone (please complete the following information):**
29+
- Device: [e.g. iPhone6]
30+
- OS: [e.g. iOS8.1]
31+
- Browser [e.g. stock browser, safari]
32+
- Version [e.g. 22]
33+
34+
**Additional context**
35+
Add any other context about the problem here.

‎.github/ISSUE_TEMPLATE/feature_request.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
name: Feature request
3+
about: Suggest an idea for this project
4+
5+
---
6+
7+
**Is your feature request related to a problem? Please describe.**
8+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
9+
10+
**Describe the solution you'd like**
11+
A clear and concise description of what you want to happen.
12+
13+
**Describe alternatives you've considered**
14+
A clear and concise description of any alternative solutions or features you've considered.
15+
16+
**Additional context**
17+
Add any other context or screenshots about the feature request here.

‎.github/workflows/publish-release.yml

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: Publish a release
2+
3+
on:
4+
release:
5+
types:
6+
- created
7+
8+
jobs:
9+
build:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- uses: actions/checkout@v2.3.2
13+
- uses: actions/setup-node@v1.4.3
14+
- run: npm ci
15+
- run: npm test
16+
17+
publish-npm:
18+
needs: build
19+
runs-on: ubuntu-latest
20+
steps:
21+
- uses: actions/checkout@v2.3.2
22+
- uses: actions/setup-node@v1.4.3
23+
with:
24+
registry-url: https://registry.npmjs.org/
25+
- run: npm ci
26+
- run: npm publish --access public
27+
env:
28+
NODE_AUTH_TOKEN: ${{secrets.PUBLISH_NPM_TOKEN}}
29+
30+
publish-gpr:
31+
needs: build
32+
runs-on: ubuntu-latest
33+
steps:
34+
- uses: actions/checkout@v2.3.2
35+
- uses: actions/setup-node@v1.4.3
36+
with:
37+
registry-url: https://npm.pkg.github.com/
38+
scope: '@contasystemer'
39+
- run: npm ci
40+
- run: echo registry=https://npm.pkg.github.com/contasystemer >> .npmrc
41+
- run: npm publish
42+
env:
43+
NODE_AUTH_TOKEN: ${{secrets.PUBLISH_GITHUB_TOKEN}}

‎.github/workflows/run-npm-test.yml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
name: Run tests
2+
3+
on:
4+
push:
5+
branches:
6+
- master
7+
8+
pull_request:
9+
branches:
10+
- master
11+
12+
jobs:
13+
test:
14+
runs-on: ubuntu-latest
15+
16+
steps:
17+
- uses: actions/checkout@v2.3.2
18+
- uses: actions/setup-node@v1.4.3
19+
- run: npm ci
20+
- run: npm test

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# August 28th 2020
2+
3+
Released version 1.0.0.

‎CONTRIBUTING.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Contributing
2+
3+
When contributing to this repository, please first discuss the change you wish to make via an issue to this repository before making a change.

‎README.md

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# Description
2+
3+
AngularJS custom element module provides functionality to wrap directive/component with custom element.
4+
Internally in Conta we use the service to reuse existing AngularJS directives/components in Elm.
5+
6+
The service has accompany [Elm module](https://package.elm-lang.org/packages/ContaSystemer/elm-angularjs-custom-element/latest/).
7+
8+
# Dependencies
9+
10+
The service uses ES5 syntax to create custom elements.
11+
You'll need to include two pollyfils before you include a code with your custom elements:
12+
13+
- **@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js** - this is for new browsers in order to understand ES5 syntax.
14+
- **@webcomponents/custom-elements/custom-elements.min.js** - this is for old browsers without `customElements` support.
15+
16+
You can add them to your `index.html` file in the following way. Make sure to add it before adding you app scripts.
17+
18+
```html
19+
<div id="custom-elements-adapter">
20+
<!-- Trick to include custom elements es5 adapter only if custom elements are supported -->
21+
<script type="text/javascript">
22+
if ('customElements' in window === false) {
23+
var adapter = document.getElementById('custom-elements-adapter');
24+
25+
adapter.parentNode.removeChild(adapter);
26+
adapter = undefined;
27+
}
28+
</script>
29+
<script type="text/javascript" src="vendor/custom-elements-es5-adapter.js"></script>
30+
</div>
31+
32+
<div id="custom-elements-polyfill">
33+
<!-- Trick to include custom elements polyfill only if custom elements are not supported -->
34+
<script type="text/javascript">
35+
if ('customElements' in window) {
36+
var polyfill = document.getElementById('custom-elements-polyfill');
37+
38+
polyfill.parentNode.removeChild(polyfill);
39+
polyfill = undefined;
40+
}
41+
</script>
42+
<script type="text/javascript" src="vendor/custom-elements.min.js"></script>
43+
</div>
44+
```
45+
46+
# Install
47+
48+
Include the file in HTML
49+
50+
```html
51+
<script src="/node_modules/lodash/lodash.js"></script>
52+
<script src="/node_modules/@contasystemer/angularjs-assert/src/angularjs-assert.js"></script>
53+
<script src="/node_modules/@contasystemer/angularjs-custom-element/src/angularjs-custom-element.js"></script>
54+
```
55+
56+
or require the file
57+
58+
```js
59+
require('@contasystemer/angularjs-custom-element');
60+
```
61+
62+
# Use
63+
64+
In JavaScript
65+
66+
```javascript
67+
csCustomElement.create('cs-component', {
68+
// Can be used to specify special element for AngularJS directive which will be used as attribute.
69+
attributeDirective: {
70+
element: 'div',
71+
attributeValue: '{{ vm.csExtraData }}',
72+
},
73+
attributes: ['cs-required', 'cs-change-year'],
74+
interpolations: ['csApiUrl', 'csMainAddressLabel'],
75+
scope: {
76+
csExtraData: csCustomElement.decode.string,
77+
},
78+
bindings: {
79+
csIntegerBinding: csCustomElement.decode.integer,
80+
csBooleanBinding: csCustomElement.decode.boolean,
81+
},
82+
customBindings: {
83+
csCustomBinding: {
84+
attribute: 'custom-attribute',
85+
attributeValue: '{{ vm.someCustomValue }}',
86+
decode: {
87+
set: function (value) {
88+
this.$scope.vm.someCustomValue = value;
89+
}
90+
}
91+
}
92+
},
93+
events: {
94+
csOnChange: {
95+
model: function (value) {
96+
return value === 'my string' : 'Yes, I have got what I wanted' : 'Oops, failed';
97+
},
98+
data: {
99+
argumentName: 'vm.someScopeValue',
100+
encode: csCustomElement.encode.identity,
101+
},
102+
init: csCustomElement.encode.identity
103+
}
104+
}
105+
});
106+
```
107+
108+
In Elm:
109+
110+
```elm
111+
viewContaComponent : Html Msg
112+
viewContaComponent =
113+
Html.angularComponentWithTransclusion
114+
{ componentName = "cs-component-element"
115+
, attributes =
116+
[ Attrs.attribute "cs-required" ""
117+
, Attrs.attribute "cs-change-year" ""
118+
, Attrs.property "csApiUrl" (Encode.string "some/url")
119+
, Attrs.property "csMainAddressLabel" (Encode.string "My address in Oslo")
120+
, Attrs.property "csExtraData" (Encode.string "Some extra data")
121+
, Attrs.property "csIntegerBinding" (Encode.int 42)
122+
, Attrs.property "csBooleanBinding" (Encode.bool True)
123+
, Attrs.property "csCustomBinding" (Encode.string "My custom string")
124+
, Decode.decode MyMessage
125+
|> Decode.requiredAt [ "detail", "model" ] Decode.string
126+
|> Decode.requiredAt [ "detail", "data" ] Decoder.int
127+
|> Decode.requiredAt [ "detail", "init" ] Decode.bool
128+
|> Events.on "csOnChange"
129+
]
130+
-- `transclude` takes one parameter with type `List (Html Never)`.
131+
-- Which means any content which does not produce any messages.
132+
, transclude = [ Html.text "Add some extra content here." ]
133+
}
134+
```
135+
136+
From `cs-component` a custom element will be created with name `cs-component-element`.
137+
138+
For more details/examples please read the source code.
139+
140+
# Extend
141+
142+
The service exposes helper functions for decoding and encoding common types.
143+
The service exposes `helper.decode` function to construct custom decoding functions.
144+
Use [module.decorator](https://docs.angularjs.org/guide/decorators) to augment decoders and encoders.
145+
E.g. at Conta we have decoders for `moment` values, etc..
146+
147+
To augment scope's `vm` for each custom element use [module.decorator](https://docs.angularjs.org/guide/decorators) to override `extendVm` method.
148+
E.g. at Conta we use `extendVm` method to augment each custom element scope's `vm` with `sendToElm` method.
149+
`sendToElm` method allows us to send messages from AngularJS to Elm directly (depends on internal implementation).

‎index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
require('lodash');
2+
require('angular');
3+
require('@contasystemer/angularjs-assert');
4+
module.exports = 'conta.customElement';

‎karma.conf.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
process.env.CHROME_BIN = require('puppeteer').executablePath();
2+
3+
module.exports = function(config) {
4+
config.set({
5+
// base path that will be used to resolve all patterns (eg. files, exclude)
6+
basePath: '',
7+
8+
// plugins to use
9+
plugins: [
10+
'karma-chrome-launcher',
11+
'karma-jasmine',
12+
],
13+
14+
// frameworks to use
15+
frameworks: ['jasmine'],
16+
17+
// start these browsers
18+
browsers: ['ChromeHeadless'],
19+
20+
// list of files / patterns to load in the browser
21+
files: [
22+
'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js',
23+
'node_modules/lodash/lodash.js',
24+
'node_modules/angular/angular.js',
25+
'node_modules/@contasystemer/angularjs-assert/src/cs-assert.provider.js',
26+
'src/cs-custom-element.service.js',
27+
'node_modules/angular-mocks/angular-mocks.js',
28+
'spec/cs-custom-element.service.spec.js',
29+
],
30+
31+
// list of files / patterns to exclude
32+
exclude: [],
33+
34+
// preprocess matching files before serving them to the browser
35+
preprocessors: {},
36+
37+
// test results reporter to use
38+
// possible values: 'dots', 'progress'
39+
reporters: ['progress'],
40+
41+
// web server port
42+
port: 9876,
43+
44+
// enable / disable colors in the output (reporters and logs)
45+
colors: true,
46+
47+
// level of logging
48+
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
49+
logLevel: config.LOG_INFO,
50+
51+
// enable / disable watching file and executing tests whenever any file changes
52+
autoWatch: false,
53+
54+
// Continuous Integration mode
55+
// if true, Karma captures browsers, runs the tests and exits
56+
singleRun: true,
57+
58+
// Concurrency level
59+
// how many browser should be started simultaneous
60+
concurrency: Infinity
61+
});
62+
}

0 commit comments

Comments
 (0)