khola

import { Component, Prop, State } from '@stencil/core';

@Component({
    tag: 'my-custom-button',
    styleUrl: 'my-custom-button.scss'
})
export class MyCustomButtonComponent {

    @Prop() myCustomAttribute: string;
    @State() checked: boolean;

khola

<template id="my-custom-component">
    <span></span>
</template>
<script type="text/javascript">
    class MyCustomComponent extends HTMLElement {
        constructor() {
            super();
            const template = document.getElementById('my-custom-component');
            const templateContent = template.content;

khola

import { Component, OnInit, ViewEncapsulation, Input, HostListener, EventEmitter, Output } from "@angular/core";

@Component({
  selector: "custom-message",
  template: `
    <p [class]="type">
      {{message}}
    </p>
  `,
  styles: [

khola

componentDidMount() {
    Storage.list("roadmaps/")
      .then(result =>
        this.setState(
          {
            projects: result
              .filter(e => e.size > 0 && e.key.includes("index.md"))
              .map(e => e.key.split("/")[1])
              .filter(e => e && e.length > 0)
          },

khola

 input[type="checkbox"]:not(:checked) ~ * {
    display: none;
  }

khola

import { useState, useEffect } from "react";
import { API } from "aws-amplify";

function useAPI(api, endpoint, settings, method = "get") {
  const [data, setData] = useState();
  const [loading, setLoading] = useState(true);

  async function callAPI() {
    const response = await API[method](api, endpoint, settings);
    setData(response);

khola

import React, { Component } from "react";

class App extends Component {
  state = { messages: [], input: "" };
  onInput = e => {
    this.setState({ input: e.target.value });
  };
  onSubmit = e => {
    e.preventDefault();
    //the real submit action code here

khola

import React, { Component } from "react";
import Amplify, { API, graphqlOperation, Auth } from "aws-amplify";
import { withAuthenticator } from "aws-amplify-react";
import { createMessage } from "./graphql/mutations";
import { listMessages } from "./graphql/queries";
import { onCreateMessage } from "./graphql/subscriptions";
import config from "./aws-exports";

Amplify.configure(config);
class App extends Component {

khola

import { APIGatewayEvent, Callback, Context, Handler } from "aws-lambda";
import * as AWS from "aws-sdk";
import axios from "axios";
import * as moment from "moment";
import { QuantifiedSelfLib } from "quantified-self-lib";
import { WebClient } from "@slack/client";
const DOMParser = require("xmldom").DOMParser;

AWS.config.update({
  region: "eu-west-1"

khola

import { useEffect, useState } from "react";
import { API, graphqlOperation } from "aws-amplify";
import * as queries from "../queries";

export const useQuery = query => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  const getFromAPI = async () => {
    const users = await API.graphql(graphqlOperation(queries[query]));